我正在尝试使用flexbox将div放在网页上.我正在设置以下CSS属性.我看到它是水平居中,但不是垂直居中.
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
这是小提琴:JSFIDDLE
你能解释一下我做错了什么吗？
一个<div>没有明确的高度默认为它的高度元素的内容,因为所有的块级元素做.您可能希望将其设置为其父级的100%<body>,但这还不够,因为这也是一个块元素.所以再次,你需要将其设置为100%高度,以匹配它的父亲,<html>.而且,仍然需要100%.
但是一旦完成所有这些,你就会得到令人讨厌的垂直滚动条.这是身体具有默认边距的结果,以及框模型的定义方式.你有几种方法可以解决这个问题,但最简单的方法是将你的边距设置为0.
看到纠正的小提琴.
html, body {
height: 100%;
margin: 0px;
}
.flex-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.item {
background-color: blue;
height: 50px;
width: 50px;
}<div class="flex-container">
<div class="item">
</div>
</div>