最可靠方案是flex：父容器设display: flex、height（如100vh）和align-items: center；line-height仅适用于单行文本；绝对定位+transform适合老浏览器；table-cell已过时。
用 flex 实现块级元素垂直居中最可靠
现代浏览器下，display: flex 是解决垂直居中的首选方案，它不依赖高度、不破坏文档流、兼容性足够好（IE10+）。关键在于父容器设为 flex，并用 align-items: center 控制交叉轴对齐。
- 父容器必须有明确的
height（比如100vh或固定像素），否则“垂直居中”无参照基准 - 子元素默认是横向居中（
justify-content: center），如不需要可省略 - 若子元素是单行文本，直接在文本容器上设
display: flex; align-items: center;即可，无需额外包裹 - 避免对
html或body直接设flex——可能干扰全局样式，建议作用于具体容器（如.container）
line-height 只适用于单行纯文本垂直居中
line-height 靠的是行框高度与容器高度一致来“挤”出视觉居中，本质是 hack，只适合文字内容且必须满足两个硬条件：单行 + 无换行/内联块。
- 容器
height必须和line-height完全相等，差 1px 都会偏移 - 子元素不能是
div、img或设置了display: block的元素，否则line-height失效 - 中英文混排或字体差异大时，实际基线位置不稳定，视觉上常“略偏下”
- 响应式场景下，
line-height很难随字号缩放保持居中，不如 flex 灵活
绝对定位 + transform(-50%) 仍需注意基准点
这是兼容老浏览器（IE9+）的常用方案，核心是 top: 50% 把元素顶边拉到父容器中间，再用 transform: translateY(-50%) 自身回退一半高度。
- 父容器必须设
position: relative（或其它非static值），否则top会相对于视口定位 -
transform的 -50% 是相对于元素自身尺寸，不是父容器；所以即使子元素高度动态变化（如文字增多），也能保持居中 - 如果同时要水平居中，写成
transform: translate(-50%, -50%)，并配left: 50%——顺序不能反，否则left会受 transform 影响偏移 - 慎用于动画场景：
transform触发重绘而非重排，性能好，但若父容器本身在滚动或缩放，需额外监听处理
table-cell 方案已过时，仅作兼容兜底
display: table-cell + vertical-align: middle 曾是 IE8 时代的主流解法，但现在除极个别遗留系统外，不建议主动使用。
立即学习“前端免费学习笔记（深入）”；
- 必须配合
display: table的父容器，语义混乱，HTML 结构被迫套两层无意义标签 - 无法与 flex 或 grid 共存，一旦父容器用了
display: flex，table-cell子元素会退化为普通块级行为 - 百分比高度在
table-cell中不可靠，经常失效，调试成本高 - 移动端 Safari 对
table-cell的vertical-align渲染存在细微偏差，尤其配合font-size: 0清空间隙时容易错位
真正复杂的地方不在“怎么写”，而在“什么时候不该用哪种方法”——比如一个需要支持键盘导航的弹窗，用绝对定位居中后，若没同步调整 z-index 和焦点管理，用户按 Tab 键就可能跳过它。居中只是布局起点，交互链路才是落地关键。
