我试着用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%
(全屏)。