Есть ли способ центрировать div без указанной ширины или высоты?

У меня есть следующий HTMLЕсть ли способ центрировать div без указанной ширины или высоты?

<div class="modal_overlay"> 
    <div class="modal_window"> 
     Content 
    </div> 
</div>

и на следующий CSS

div.modal_overlay { 
    display: none; 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    left: 0; 
    top: 0; 
    background-color: rgba(150, 150, 150, 0.75); 
} 
div.modal_overlay .modal_window { 
    padding: 10px; 
    background-color: white; 
}

modal_window населен с произвольным содержанием от вызова AJAX. Поскольку я не знаю требуемой ширины и высоты содержимого, как я могу сделать modal_window занятым минимально необходимым пространством и центрировать его как по вертикали, так и по горизонтали на экране? Я ищу решение, совместимое с большинством современных браузеров, где мне не нужно указывать высоту или ширину любого дочернего элемента (рекурсивно) modal_overlay (включая любые элементы в содержимом AJAX). Возможно ли это без использования JavaScript? Если я должен использовать JavaScript, что является одним из лучших способов его достижения?

EDIT: Я также хочу избежать изменения типов отображения любого из элементов.

источник

2016-02-23 CzechErface

Попробуйте это:

div.modal_overlay .modal_window { 
    padding: 10px; 
    background-color: white; 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%); 
}

источник

2016-02-23 07:09:31 CiprianD

Блестящий! Кажется, он работает для всех текущих вызовов AJAX. Я решил, что решение было очень простым. В этом случае это, вероятно, дублирующий вопрос. Я понимаю, что мне нужно использовать другие преобразования, такие как «moz-» и «webkit», но это прибило его. – CzechErface

Использование display:flex с align-items: center; и justify-content: center;. И работает во всех современных браузерах.

div.modal_overlay { 
    align-items: center; 
    background-color: rgba(150, 150, 150, 0.75); 
    display: flex; 
    height: 100%; 
    justify-content: center; 
    left: 0; 
    position: fixed; 
    top: 0; 
    width: 100%; 
}

Working Fiddle

источник

2016-02-23 07:12:07 ketan

В то время я не упоминал об этом в исходном вопросе, но я хотел избежать изменения типа отображения. – CzechErface

@CzechErface Тогда 'position: absolute' является только опцией. – ketan

Вы можете использовать min-width, max-width и положение абсолютно в центре.

div.modal_overlay { 
 
/* display: none; */ 
 
height: 100%; 
 
width: 100%; 
 
position: fixed; 
 
left: 0; 
 
top: 0; 
 
background-color: rgba(150, 150, 150, 0.75); 
 
} 
 
div.modal_overlay .modal_window { 
 
padding: 10px; 
 
background-color: white; 
 
max-width: 800px; 
 
min-width: 300px; 
 
min-height: 200px; 
 
position: absolute; 
 
left: 50%; 
 
top: 50% ; 
 
-webkit-transform: translate(-50%, -50%); 
 
-moz-transform: translate(-50%, -50%); 
 
-ms-transform: translate(-50%, -50%); 
 
transform: translate(-50%, -50%); 
 
}

<div class="modal_overlay"> 
 
<div class="modal_window"> 
 
    Content 
 
</div> 
 
</div>

источник

2016-02-23 07:12:35

Я не хочу указывать ширину или высоту, включая минимум или максимум, но ваше решение, вероятно, будет работать без них. – CzechErface

Это простой способ центрирования DIV widhout заданной высоты и ширины:

.center_div { 
    position: fixed; 
    display: block; 
    z-index:999; 
    right:40%; 
    left:40%; 
    bottom:40%; 
    top:40%; 
    background-color: rgba(150, 150, 150, 0.75); 
}

Вы увеличить или descrease ширину за счет увеличения/уменьшения процента.

источник

2016-02-23 07:22:20

Есть ли способ центрировать div без указанной ширины или высоты?

ответ

Смежные вопросы