中心元素与flexbox

在flexbox出现之前，垂直定位元素一直是网页设计的一大挑战。使用flexbox，可以很容易地将元素垂直居中到父元素中。

在这节课中:

1. 中心的单个元素
2. 中心多个元素

在所有这些例子中，父元素被设置为100vh的高度，这是视口高度的100%。

学习如何使用所有的flexbox属性。

将单个元素居中

使居中:将一个元素垂直或水平地居中于一段的中间:

1. 向节中添加您希望的元素
2. 选择的部分
3. 设置显示设置为flex在风格的面板
4. 设置flex布局来证明:中心而且对齐:中心

当您希望将包含多个元素的单个元素居中时，此过程与此相同。例如，如果您想垂直居中一个容纳大量内容的容器。将父元素设置为flex，然后对齐和居中。

中心多个元素

你也可以将多个元素居中。例如，如果你有2张卡，它们都需要堆叠并水平居中，然后垂直居中，你可以使用flexbox:

1. 将所有元素添加到一个section元素中
2. 选择section元素
3. 在风格的面板设置显示设置为flex
4. 将其设置为垂直方向
5. 集证明:中心而且对齐:中心