垂直中心div与flexbox

Question

我尝试使用flexbox垂直居中div： 奇怪align-items: center没有改变任何事情。玩了一段时间后，我意识到我需要将和 html设置为height:100%;。

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垂直对齐？我错过了什么吗？

Answer 1

height的默认值为auto，这表示您的html / body不会全屏显示。

要获得全屏内容，您已指定身高为100%或100vh。

  

使div垂直对齐？我错过了什么吗？

是的，您的内容垂直居中于父级（在这种情况下，垂直居中于html / body的内容）。您刚刚错过了将html / body的高度设置为100%（全屏）。