Question

我正在尝试使用flexbox将div放在网页上。我正在设置以下CSS属性。我看到它是水平居中，但不是垂直居中。

.flex-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

这是小提琴：JSFIDDLE

你能解释一下我做错了吗？

Answer 1

没有明确高度的<div>元素默认为其内容的高度，正如所有块元素所做的那样。您可能希望将其设置为其父级<body>的100％，但这还不够，因为这也是一个块元素。同样，您需要将其设置为100％高度，以匹配它的父级<html>。而且，仍然需要100％。

但是一旦完成所有这些，你就会得到令人讨厌的垂直滚动条。这是身体具有默认边距的结果，以及定义框模型的方式。你有几种方法可以解决这个问题，但最简单的方法是将你的边距设置为0。

请参阅更正的fiddle。

＆＃13;

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;
}

＆＃13;

<div class="flex-container">
    <div class="item">
    </div>
</div>

＆＃13;

Answer 2

您只需将html，body和您的灵活容器设置为height: 100%即可。它不起作用的原因是你的flex容器没有明确的高度设置，因此它默认为其内容的高度。

现场演示：

html, body {
    height: 100%;
}

.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>

JSFiddle版本：http://jsfiddle.net/d4vkq3s7/3/

使用flexbox垂直居中

2 个答案: