中心使用flexbox在水平和垂直方向上划分
我试图div使用flexbox垂直和水平居中,但它没有按预期工作.
这是一张图片,展示了我所拥有的和我所期待的.
以下是代码:
<html lang="en">
<body>
<style type="text/css">
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
<div>111111</div>
<div>222222</div>
<div>333333</div>
</body>
</html>
编辑
当然,我知道最好将divs放在一个容器中,这是我先尝试过的,但在这种情况下,我最终会得到这样的东西:
正如您所看到的,divs按预期集中在容器中,但容器本身不是.
你的代码很好,你应该只添加一个min-height: 100vh,body所以div可以在视口高度居中(正文并不总是覆盖视口高度,它只需要最小的空间来包含它的子节点)
示例:http://codepen.io/anon/pen/xGQpKO
添加这个
html, body {
height: 100%;
}
小提琴：https : //jsfiddle.net/1Luo758m/
您需要align-content：center才能运行
align-content : center
看看这个：
http://css-tricks.com/almanac/properties/a/align-content/
我建议您将对象嵌套在 div 中。改变身体行为是危险的。
| 归档时间： |
|
| 查看次数： |
4364 次 |
| 最近记录： |