Вертикальный центр div с flexbox

Я попытался вертикально центрировать div с помощью flexbox: Oddly align-items: center ничего не менял. Поиграв некоторое время, я понял, что мне нужно установить тело и html на height:100%;.Вертикальный центр div с flexbox

HTML:

<div id="login_container"> 
    <div class="login"></div> 
    <div class="login"></div> 
    <div class="login"></div> 
</div>

CSS:

#login_container { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height:100%; 
} 
.login { 
    background-color: #008000; 
    width: 100px; 
    height: 100px; 
    margin: 2px; 
}

Для сравнения: This fiddle работает в то время как this one нет.

Почему я должен добавить

body,html { 
    height:100%; 
}

так что DIV является вертикально? Я что-то упускаю?

источник

2016-02-21 Lukas Winkler

Или вы могли бы просто использовать '100vh' https://jsfiddle.net/z8m6n6pz/1/ –

Почему вторая не работает? Потому что высота должна быть 100% * что-то *, и вы не сказали, что нужно быть 100%. –

теги HTML и BODY по умолчанию имеют высоту 'auto', что означает, что высота основана на содержании. когда вы даете им «height: 100%», они будут заполнять всю высоту области просмотра. В качестве альтернативы, как было предложено @NenadVracar, вы можете просто использовать единицы просмотра. (будьте осторожны с поддержкой браузера tho) – Aziz

Значение по умолчанию height равно auto, это означает, что ваш html/body не будет полноэкранным.

Для получения полного содержимого экрана укажите высоту 100% или 100vh.

так, чтобы div был выровнен по вертикали? Я что-то упускаю?

Да, ваше содержание центрирован родителя (в данном случае вертикально к центру содержания html/body). Вы только что не указали высоту html/body до 100% (весь экран).

источник

2016-11-30 13:07:15 NeosFox

Вертикальный центр div с flexbox

ответ

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