使用Flexbox、Grid、伪元素或table-cell可实现多行文字垂直居中，推荐现代布局首选Flexbox和Grid。
多行文字垂直居中在CSS中可以通过几种可靠的方法实现，关键是容器高度固定或自适应内容，同时保持文本自然居中。以下是几种常用且兼容性良好的方案。
使用 Flexbox（推荐）
Flex布局是最简单、最现代的方式，适用于大多数场景。
给父容器设置 display: flex，并使用 align-items: center 实现垂直居中。
示例代码：这是一段
多行文字
垂直居中显示
多行文字
垂直居中显示
立即学习“前端免费学习笔记（深入）”；
对应CSS：
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中（可选） */
height: 200px; /* 固定高度或由上下文决定 */
}
使用 Grid 布局
CSS Grid 同样支持简洁的居中方式，适合现代浏览器。
将容器设为 display: grid，然后使用 place-items: center。
示例代码：
.container {
display: grid;
place-items: center; /* 水平和垂直居中 */
height: 200px;
}
这种方法一行代码即可完成居中，语义清晰。
使用伪元素实现（兼容老浏览器）
在不支持 Flex 或 Grid 的旧环境中，可以用“伪元素 + vertical-align”技巧。
原理是利用内联元素的 vertical-align 特性，配合一个撑高全容器的伪元素。
实现方式：
.container {
height: 200px;
text-align: center;
font-size: 0; /* 消除空白间隙 */
}
.container::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
}
.text {
display: inline-block;
vertical-align: middle;
font-size: 16px;
text-align: left;
}
HTML结构：
多行文字
居中显示
使用 table-cell（传统方法）
将容器设为表格单元格行为，利用 vertical-align: middle 居中内容。
.container {
display: table-cell;
vertical-align: middle;
text-align: center;
height: 200px;
width: 200px;
}
注意：该方法需要固定宽高，且父级最好有 display: table 包裹，灵活性较差。
基本上就这些。现代项目推荐使用 Flexbox 或 Grid，代码简洁，维护方便。老项目可考虑伪元素或 table-cell 方案。选择取决于浏览器支持和布局复杂度。
