display: flex 是固定高度容器中多行文本垂直居中的首选方案，需设明确高度并配合 align-items: center；display: table-cell 仅限兼容 IE8–9 且不适用于替换元素；position: absolute 因高度不可控、维护难而不推荐。
固定高度容器里的多行文本垂直居中，display: flex 是当前最可靠、最直接的方案；display: table-cell 仅在必须兼容 IE8–9 时才考虑，且不能用于 <button> 等替换元素。
用 display: flex 实现多行文本垂直居中
这是现代项目首选方案，无需额外 wrapper，语义清晰，响应式友好。
- 父容器必须设明确高度（如
height: 120px或min-height: 120px），否则align-items: center无参照基准 - 直接对容器设
display: flex+align-items: center，子元素（<p>、<span>等）无需额外样式 - 加
justify-content: center可同时水平居中；若内容含图标，也一并居中，无需特殊处理 - 避免混用
line-height：它会与 flex 的基线计算冲突，导致文字上下偏移 - IE11 支持标准写法；IE10 需加
display: -ms-flexbox前缀，但已基本可忽略
display: table-cell 的适用边界与陷阱
它本质是借用表格渲染机制，不是通用居中工具，只在特定旧环境里“能用”，不是“该用”。
- 仅适用于块级容器（如
<div>），不能用于<button>、<input>、<textarea>—— 浏览器会忽略该声明 - 必须配合固定
height和vertical-align: middle，三者缺一不可 - IE6/7 完全不支持；IE8–9 可用，但
table-cell会丢失margin、破坏块级流，后续调整容易出错 - 响应式下对
min-height/max-height行为不稳定，比如高度随内容撑开后，vertical-align失效 - 错误写法常见于给子元素设
display: table-cell—— 居中逻辑在容器层，不是内容层
为什么不用 position: absolute + margin？
它理论上可行，但实操中极易翻车，尤其面对动态内容。
立即学习“前端免费学习笔记（深入）”；
- 需要预知子元素精确高度才能算
margin-top负值，而多行文本高度随字体、字号、换行不可控 -
absolute脱离文档流，父容器高度塌陷，常需额外 hack（如伪元素撑高） -
top: 50%; margin-top: -Xpx在缩放或不同 DPI 下偏移明显，维护成本高 - 若父容器使用
flex或grid，绝对定位反而干扰主布局逻辑
真正容易被忽略的是：垂直居中从来不是独立问题，而是容器尺寸、内容特性、浏览器支持三者共同约束的结果。别硬套“万能解”，先确认容器是否固定高度、是否允许 flex、是否真要支持 IE9 —— 这些判断比写哪行 CSS 更关键。
