我试着用flexbox将div垂直居中:
奇怪的是,align-items: center并没有进行任何更改。玩了一段时间后,我意识到我需要将body和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是垂直对齐的?我想念什么吗?

最佳答案

height的默认值为auto,这意味着您的html / body不会全屏显示。

要获取全屏内容,您必须将高度指定为100%100vh


  这样的div是垂直对齐的?我想念什么吗?


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

10-05 20:43
查看更多