多行文本垂直居中是前端布局中经常遇到的需求，相比单行文本的垂直居中，多行文本因为高度不固定，使用传统方案容易出现适配问题，而flexbox布局可以通过简单的属性配置稳定实现该效果。
flexbox实现多行文本垂直居中的核心原理
flexbox布局的核心是通过设置容器的主轴和交叉轴对齐方式，让内部子元素按照规则排列。要实现垂直居中，只需要让容器在交叉轴方向（默认是垂直方向）上对齐子元素即可，多行文本作为容器的子元素，自然也会跟随对齐规则实现垂直居中。
关键CSS属性说明
- display: flex：将容器设置为flex弹性容器，内部子元素自动成为flex项目
- align-items: center：设置flex项目在交叉轴方向上的对齐方式为居中，默认交叉轴是垂直方向，因此可以实现垂直居中
- justify-content：设置flex项目在主轴方向上的对齐方式，可根据需求设置水平居中或者左对齐等
- height：需要给flex容器设置明确的高度，否则容器高度会被内容撑开，无法体现垂直居中效果
基础实现示例
下面是一个最简单的多行文本垂直居中实现代码，容器高度固定，内部放置多行文本，通过flex属性实现垂直居中：
/* 容器样式 */
.flex-container {
display: flex;
/* 垂直方向居中 */
align-items: center;
/* 水平方向居中，可根据需求调整 */
justify-content: center;
/* 必须设置容器高度，否则无法体现垂直居中 */
height: 300px;
width: 500px;
border: 1px solid #cccccc;
/* 可选：设置内边距避免文本贴边 */
padding: 0 20px;
box-sizing: border-box;
}
/* 多行文本容器，也可以是直接文本节点 */
.text-content {
/* 可选：限制文本宽度，触发换行 */
max-width: 400px;
line-height: 1.6;
}
对应的HTML结构如下：
<div class="flex-container">
<div class="text-content">
这是一段多行文本内容，用于测试flexbox布局下的垂直居中效果。当文本内容超过一行时，会自动换行，并且整个文本块会在容器中保持垂直居中的状态，适配不同长度的文本。
</div>
</div>
适配不同场景的调整技巧
文本左对齐同时垂直居中
如果需求是文本左对齐，仅垂直居中，只需要调整justify-content属性即可：
.flex-container {
display: flex;
align-items: center;
/* 主轴方向左对齐 */
justify-content: flex-start;
height: 300px;
width: 500px;
border: 1px solid #cccccc;
padding: 0 20px;
box-sizing: border-box;
}
容器高度不固定的场景
如果容器高度不固定，而是由父容器决定，只需要保证父容器有明确的高度，flex容器设置height: 100%即可继承父容器高度，同样可以实现垂直居中：
/* 父容器 */
.parent-container {
height: 400px;
width: 600px;
border: 1px solid #999999;
}
/* flex容器 */
.flex-container {
display: flex;
align-items: center;
justify-content: center;
/* 继承父容器高度 */
height: 100%;
padding: 0 20px;
box-sizing: border-box;
}
常见问题说明
- 如果设置
align-items: center后没有生效，首先检查容器是否设置了display: flex，其次检查容器是否有明确的高度 - 多行文本如果直接放在flex容器内，不需要额外包裹元素，flex容器会将其作为一个flex项目处理，同样可以实现垂直居中
- 该方案兼容性较好，支持所有现代浏览器，如果需要兼容旧版浏览器，可以添加对应的前缀属性
注意：如果flex容器的flex-direction被设置为column，那么交叉轴会变成水平方向，此时align-items: center实现的是水平居中，需要调整对应的属性配置。