<p>Flexbox 是当前最稳妥的多行文本垂直居中解法，通过 display: flex、align-items: center 和 justify-content: center 实现，无需依赖行高或固定尺寸，IE11 需加 -ms- 前缀。</p>
直接用 line-height 不行，它只对单行生效；多行文本垂直居中必须脱离“行高依赖”，核心是让内容在父容器内真正按空间中心对齐。
Flexbox 是当前最稳妥的解法
现代项目首选 display: flex，不需要知道子元素尺寸，也不依赖父容器是否固定高度。
- 父容器加
display: flex、align-items: center（垂直）、justify-content: center（水平） - 子元素可以是
<p>、<div>或任意块级结构，无需额外修饰 - IE11 支持有限（需加
-ms-前缀），但 IE10 及以下完全不支持 - 注意：若父容器设置了
flex-direction: column，justify-content控制的是垂直方向，别反了
Grid 的 place-items 一行搞定
比 Flex 更简洁，语义更明确，适合已确定使用 Grid 布局的场景。
- 父容器设
display: grid+place-items: center（等价于justify-items: center+align-items: center） - 同样无视子元素宽高、行数、是否换行
- 兼容性略低于 Flex：Chrome 57+/Firefox 45+/Safari 10.1+，Edge 16+；iOS Safari 10.3+ 起支持
- 如果父容器已有其他 Grid 轨道定义，
place-items仍生效，但可能被显式justify-self/align-self覆盖
table-cell 方案用于兼容旧浏览器
当必须支持 IE8–9 时，这是少数能稳定工作的方案，但结构和语义有妥协。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: table、固定或最小高度（height或min-height） - 子容器设
display: table-cell+vertical-align: middle+text-align: center - 子内容可为多段
<p>，自动按单元格内容区垂直居中 - 缺点：IE7 及以下不支持
display: table-cell；语义上把布局当表格用，不利于可访问性 - 不要给子容器设
height，否则会破坏居中逻辑
伪元素 + vertical-align 容易踩坑
这个方案看似轻量，但实际调试成本高，只建议临时补救或极简场景。
- 原理是插入一个 100% 高的
::before伪元素，设为inline-block，再让真实内容也设为inline-block并配vertical-align: middle - 必须清除 inline-block 元素间的默认空白间隙（常见手段：
font-size: 0在父级，再在子级重设字体大小） - 父容器需设
text-align: center才能水平居中；若内容含块级元素，得再包一层 - 响应式下高度变化时，伪元素高度需同步更新（无法用
100%自适应，常需 JS 配合）
真正麻烦的不是选哪种方法，而是混用时的优先级冲突——比如同时写了 flex 和 table-cell，或在 Grid 容器里又套 Flex 子项。实际开发中，定好团队规范，统一用一种主方案，比到处打补丁更省时间。
