前端开发中，经常会遇到需要将元素垂直居中的情况。传统的实现方式是通过绝对定位来实现，但是这种方法不仅繁琐，而且需要调整位置时需要重新计算样式。而使用 Flexbox 可以轻松实现响应式的垂直居中。
Flexbox 布局基础
Flexbox 布局是 CSS3 引入的一种盒模型布局，目的是为了解决传统的布局方式无法解决的一些问题。它可以控制盒子的排列顺序、对齐方式、占用空间和元素之间的空间分配等。
在 Flexbox 布局中，一个容器（flex container）可以配置成为一个 Flexbox 容器。容器内部的每个子元素（flex item）则可以配置成为一个 Flexbox 元素。通过设置容器的属性，可以控制元素在容器中的位置和大小。
容器属性
Flexbox 容器的属性通常以 flex- 开头，并可以用来控制子元素的排列方式和空间分配：
flex-direction：指定主轴方向。默认值为row，表示水平方向。如果设置为column，则表示垂直方向。flex-wrap：指定子元素是否要换行。默认值为nowrap，表示不换行。如果设置为wrap，则表示子元素可以换行。justify-content：指定主轴上的对齐方式。可以设置以下几种对齐方式：flex-start：从主轴起点开始布局。flex-end：从主轴终点开始布局。center：在主轴中间布局。space-between：等距分布在主轴上。space-around：在主轴上空出相同的间距。
align-items：指定交叉轴上的对齐方式。可以设置以下几种对齐方式：flex-start：从交叉轴起点开始布局。flex-end：从交叉轴终点开始布局。center：在交叉轴中间布局。baseline：以子元素的基线对齐。stretch：将子元素拉伸到交叉轴的长度。
元素属性
Flexbox 元素的属性同样以 flex- 开头，可以用来控制元素自身的排列方式和空间分配：
order：指定元素在容器中的排列顺序。默认值为0，越小越在前面。flex-grow：指定元素的可伸缩的比例。默认为0，表示不拉伸。如果值为1，则表示空间平均分配。如果多个元素设置了flex-grow属性，其值表示比例的大小。flex-shrink：指定元素的收缩比例。默认为1，表示空间不足时会自动收缩。如果值为0，则表示不收缩。flex-basis：指定元素占用空间的基础大小。默认为auto，表示元素的原始大小。如果设置为0，则表示元素不占用空间。flex：这是flex-grow、flex-shrink和flex-basis的缩写形式，可以同时设置这三个属性。align-self：指定元素在交叉轴上的对齐方式，可以覆盖容器设置的align-items属性。
实现垂直居中
在 Flexbox 布局中，通过设置容器和元素的属性，就可以轻松实现垂直居中。下面简单介绍几种方法。
使用 align-items
align-items 属性可以设置元素在交叉轴上的位置，当它的值为 center 时，元素就会处于容器的中间位置。
<div class="container"> <div class="item">内容区域</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- ------- ------ - ----- - ------ ------ ------- ------ ----------------- ----- -
上述代码中，align-items 属性被设置为 center，元素就会垂直居中。
使用 display: table-cell
在传统的布局方式中，使用 display: table-cell 和 vertical-align: middle 就可以实现垂直居中。在 Flexbox 布局中同样可以使用这种方式。
<div class="container">
<div class="table-cell">
<div class="item">内容区域</div>
</div>
</div>-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- ------- ------ - ----------- - -------- ----------- --------------- ------- - ----- - ------ ------ ------- ------ ----------------- ----- -
上述代码中，通过设置容器的 align-items 属性将元素垂直居中，同时使用 display: table-cell 和 vertical-align: middle 实现元素的垂直居中。
使用 margin
使用 margin 可以将元素垂直方向的间距均匀分配到元素的上下两端，从而实现垂直居中。
<div class="container"> <div class="item">内容区域</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ - ----- - ------ ------ ------- ------ ------- ---- -- ----------------- ----- -
上述代码中，通过将元素的 margin 设置为 auto 0，就可以将间距均匀分配到元素的上下两端，从而实现垂直居中。
总结
Flexbox 布局是一种强大的布局方式，不仅可以实现传统布局方式无法实现的效果，还可以轻松实现垂直居中。通过灵活使用 Flexbox 容器和元素的属性，可以实现各种各样的布局效果。在实践中，使用 Flexbox 布局能够提高布局效率和代码可维护性，是前端开发中值得掌握的技能。
示例代码见 CodePen。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6498dbe648841e98945cc0fa