我正在尝试使用 flexbox 将网页上的 div 居中。我正在设置以下 CSS 属性。我看到它水平居中，但不是垂直居中。
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
这是 fiddle :JSFIDDLE
你能解释一下我做错了什么吗？
最佳答案
A <div>没有显式高度的元素默认为其内容的高度，就像所有 block 元素一样。您可能希望将其设置为它的父级 <body> 的 100%。 ，但这还不够，因为它也是一个 block 元素。同样，您需要将其设置为 100% 高度，以匹配它的父级 <html>。 .再一次，仍然需要 100%。
但是一旦完成所有这些，您就会看到那个烦人的垂直滚动条。这是主体具有默认边距以及盒子模型定义方式的结果。您有多种方法可以解决这个问题，但最简单的方法是将边距设置为 0。
参见更正 fiddle .
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>关于html - 使用 flexbox 垂直居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32301205/