作为前端开发者，在开发网页时经常会遇到子元素居中的问题。一般而言，我们会用到 text-align: center 或 vertical-align: middle 进行对齐。但在某些情况下，垂直居中并不能实现。针对这样的情况，CSS 中有一种广泛应用的布局技术：Flexbox 布局。
什么是 CSS Flexbox 布局？
Flexbox 是 Flexible Box 的缩写，意为弹性盒子布局。Flexbox 布局是 CSS3 提供的一种强大的 CSS 布局方案，它可以使容器中的子元素在不同的屏幕尺寸、设备等环境下得以自适应地展示，并能够轻松的实现子元素的垂直居中、自适应等布局。
Flexbox 属性
Flexbox 布局就像是一个容器，而容器中包含了各种不同的 Flexbox 属性。以下是常用的 Flexbox 属性：
display
用于定义元素的布局方式为 flex。例如：
---------- - -------- ----- -
flex-direction
用于定义主轴方向。默认值为 row。可以选择为 row-reverse、column、column-reverse 等。
---------- - --------------- ------------ -
justify-content
用于定义子元素在主轴上的对齐方式。默认为 flex-start。可以选择为 flex-end、center、space-around、space-between 等。
---------- - ---------------- ------- -
align-items
用于定义子元素在交叉轴上的对齐方式。默认值为 stretch。可以选择为 flex-start、flex-end、center、baseline 等。
---------- - ------------ ------- -
align-content
用于定义子元素在多行上的交叉轴对齐方式（仅当容器内有多个子元素在纵向上排列时有效）。
---------- - -------------- ------- -
示例代码
以下是一个使用 Flexbox 布局来实现垂直居中的示例代码：
---- ------------------
---- -------------
-----------------
------
---------------- - ------- ------ -------- ----- ---------------- ------- ------------ ------- - ----- - ------ ------ ------- ------ ----------------- ----- -------- ----- ---------------- ------- ------------ ------- -
在上面的代码中，我们使用了一个容器（.container）和一个子元素（.item）。在容器中我们定义了它的高度，并把它的布局方式设置为了 flex，并将主轴方向设置为默认值 row（横向）。
然后，我们对子元素 .item 也进行了布局调整，使它也是一个 flex 容器。这样一来，就可以对子元素及其内部元素进行 Flexbox 的布局调整了。
最后，我们使用了 justify-content 和 align-items 这两个主要的 Flexbox 属性来让子元素 .item 在父容器 .container 中垂直、水平居中。
结论
通过上面的示例代码，我们可以看到使用 Flexbox 布局可以轻松实现居中对齐，而无需使用其他的 CSS 属性和技巧。相比传统的垂直居中方式，Flexbox 布局无论在代码编写、可维护性、代码的冗余度方面都更加优秀，值得我们在实际的开发中广泛的应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671340acad1e889fe20ba337