<p>推荐使用 display: flex 实现多行文字水平垂直居中，通过 justify-content: center 和 align-items: center 即可，兼容 IE10+ 及主流移动端；老项目需支持 IE9- 时才用 table-cell；Grid 和 absolute + transform 为备选方案。</p>
多行文字在HTML元素内水平+垂直居中，不能靠 line-height 拉高（只对单行有效），也不能只写 text-align: center（它不管垂直）。现代项目直接用 display: flex 最稳，兼容性已覆盖 IE10+、所有主流移动端；老项目若需支持 IE9 及以下，才考虑 display: table-cell 方案。
flex 实现多行文字居中（推荐首选）
父容器设为 flex，子元素是纯文本或带换行的块级元素（如 <p>、<div>），无需知道内容行数或高度。
-
display: flex开启弹性布局 -
justify-content: center控制水平居中 -
align-items: center控制垂直居中 - 若文字本身需要换行对齐，给子元素加
text-align: center和max-width防溢出
示例：
.container {
height: 200px;
width: 300px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.content {
text-align: center;
max-width: 260px;
margin: 0;
}
注意：align-items: center 对文本节点本身生效，不是“让文字基线居中”，而是把整个文本块当一个 flex item 居中——这正是我们想要的效果。
立即学习“前端免费学习笔记（深入）”；
table-cell 实现（兼容 IE8+，但有隐性限制）
适合无法使用 flex、又必须支持 IE8/9 的遗留系统。原理是把容器模拟成表格单元格，靠 vertical-align: middle 垂直居中。
- 父容器必须设固定
height（百分比高度无效） - 父容器
display: table-cell，同时加vertical-align: middle和text-align: center - 不能和
float、position: absolute共存；IE7 及以下不支持 - 子元素不能是
<span>这类行内元素（需包裹一层<div>或设display: block）
示例：
.container {
height: 200px;
width: 300px;
border: 1px solid #ccc;
display: table-cell;
vertical-align: middle;
text-align: center;
}
Grid 实现（简洁但兼容性略窄）
display: grid + place-items: center 是最简写法，语义清晰，但 Safari 10.1 之前不支持 place-items，需降级写 justify-items: center; align-items: center。
- 仅需两行声明，无方向干扰（不像 flex 默认 row）
- 不依赖子元素是否块级，
<span>直接套也能居中 - 若容器已有 grid 子项，
place-items会影响所有子项，需谨慎
示例：
.container {
height: 200px;
width: 300px;
border: 1px solid #ccc;
display: grid;
place-items: center;
}
absolute + transform（通用但需额外 wrapper）
适用于无法改父容器 display 类型的场景（比如第三方组件封装死），但必须确保父容器有定位上下文（position: relative）。
- 子元素设
position: absolute，top: 50%+left: 50% - 用
transform: translate(-50%, -50%)回拉自身宽高的一半 - 文字内容需包裹在子元素内（不能直接写在绝对定位元素里，否则换行会错位）
- 父容器若高度不固定，此法失效；且不利于响应式缩放
示例：
.container {
position: relative;
height: 200px;
width: 300px;
border: 1px solid #ccc;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
max-width: 260px;
}
真正容易被忽略的是：多行文字居中 ≠ 让每行文字基线对齐，而是让整段文字作为一个视觉整体居中。flex 和 grid 天然满足这点；而 vertical-align: middle 在非 table-cell 环境下对普通 div 完全无效——别试了。
