在网页前端开发中，垂直居中布局是很多场景下的刚需，比如弹窗内容居中、卡片内元素对齐等。传统的垂直居中方案要么依赖固定高度计算，要么存在浏览器兼容性问题，而css flex布局的出现让垂直居中实现变得非常简单高效。
flex实现垂直居中的核心原理
flex布局的核心是通过设置容器的display: flex将其变为弹性容器，然后通过align-items属性控制弹性项目在交叉轴（默认是垂直方向）上的对齐方式。当设置align-items: center时，所有弹性项目会在垂直方向居中排列。
基础单行元素垂直居中实现
如果只需要让单个元素在容器中垂直居中，只需要给父容器设置两个核心属性即可，代码如下：
/* 父容器样式 */
.flex-container {
display: flex;
align-items: center; /* 控制垂直方向居中 */
height: 300px; /* 需要给容器设置明确高度，否则垂直居中效果不明显 */
background-color: #f5f5f5;
}
/* 子元素样式 */
.flex-item {
width: 200px;
height: 100px;
background-color: #409eff;
color: white;
text-align: center;
line-height: 100px;
}
对应的html结构如下：
<div class="flex-container">
<div class="flex-item">垂直居中元素</div>
</div>
多行元素垂直居中实现
如果容器内有多个元素需要整体垂直居中，上面的align-items: center同样适用，多个元素会作为整体在垂直方向居中，代码如下：
.multi-container {
display: flex;
align-items: center;
height: 400px;
background-color: #f0f0f0;
padding: 20px;
}
.multi-item {
width: 150px;
height: 80px;
background-color: #67c23a;
color: white;
margin: 10px;
text-align: center;
line-height: 80px;
}
<div class="multi-container">
<div class="multi-item">元素1</div>
<div class="multi-item">元素2</div>
<div class="multi-item">元素3</div>
</div>
垂直水平同时居中实现
实际开发中往往需要元素同时实现垂直和水平居中，此时只需要额外添加justify-content: center属性控制主轴（默认水平方向）的对齐方式即可，完整代码如下：
.center-container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 500px;
background-color: #e8e8e8;
}
.center-item {
width: 250px;
height: 120px;
background-color: #e6a23c;
color: white;
text-align: center;
line-height: 120px;
border-radius: 8px;
}
<div class="center-container">
<div class="center-item">垂直水平居中</div>
</div>
不同场景的适配说明
- 如果容器的高度是自适应内容高度，垂直居中效果可能无法体现，需要给容器设置固定高度或者最小高度。
- 如果弹性项目本身设置了
align-self属性，会覆盖容器的align-items设置，需要注意属性优先级。 - flex布局在IE10及以上版本支持，如果需要兼容更老的浏览器，需要添加对应的前缀或者使用传统布局方案。
常见问题解答
为什么设置了flex还是不能垂直居中
首先检查父容器是否设置了明确的高度，其次检查是否有其他样式覆盖了align-items属性，最后确认子元素是否是弹性项目的直接子元素，flex属性只对直接子元素生效。
flex垂直居中会影响子元素布局吗
默认情况下align-items: center只会改变子元素在垂直方向的对齐方式，不会影响子元素的宽度和水平排列，除非同时设置了其他flex相关属性。