最可靠方案是flex布局：父容器设display: flex、align-items: center、justify-content: center；绝对定位+transform兼容旧浏览器；line-height仅适用单行文本；table-cell方式已不推荐。
flex 布局实现垂直居中最可靠
现代浏览器下，display: flex 是最简洁、最可控的垂直居中方案，尤其适合容器高度已知或由内容撑开的场景。
关键在于父容器设置 display: flex + align-items: center（垂直）+ justify-content: center（水平），子元素无需额外样式。
- 若父容器高度为
100vh或固定值，子元素会严格居中；若父容器高度由内容决定，需确保其有明确高度上下文（比如min-height） - 不支持 IE9 及以下；IE10–11 需加
-ms-前缀（如display: -ms-flexbox），但行为略有差异 - 慎用
flex: 1在子元素上——它会拉伸子元素占满剩余空间，可能破坏居中预期
.container {
display: flex;
align-items: center;
justify-content: center;
height: 400px;
}
.item {
/ 无需设置 margin / position / transform /
}
绝对定位 + transform 实现兼容性更强的居中
当需要支持 IE9 或老版本移动端时，position: absolute 配合 transform: translate(-50%, -50%) 是更稳妥的选择，但要求父容器有定位上下文（position: relative 或类似）。
常见错误是只写 top: 50% 却忘了 transform，结果元素顶部在中间，整体偏下了。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设置
position: relative（或其他非static值），否则子元素会相对于 viewport 定位 -
left: 50%和top: 50%是把元素左上角移到中心，transform才真正把它“回拉”自身宽高的一半 - 若子元素宽高未知（如纯文字块），该方法依然有效；但若宽高动态变化，无需重算，
transform自动适应
.container {
position: relative;
height: 400px;
}
.item {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
line-height + text-align 仅适用于单行内联内容
用 line-height 等于容器高度来“挤”单行文本垂直居中，是早期常用技巧，但局限极大，仅适用于纯文本、单行、无换行、无 padding 干扰的场景。
一旦内容变成多行、图片、inline-block 元素，或容器用了 box-sizing: border-box + padding，就会失效。
- 容器必须是块级且高度固定，
line-height必须与之严格相等 -
text-align: center只管水平，垂直靠line-height撑开行框 - 字体渲染差异可能导致视觉上仍略偏上/下，尤其在 Windows 上 ClearType 开启时
.container {
height: 60px;
line-height: 60px;
text-align: center;
}
.container span {
display: inline;
}
table-cell 方式现在基本不推荐
用 display: table-cell + vertical-align: middle 曾是 flex 出现前的主流方案，但语义错乱、响应式差、嵌套复杂，现代项目应避免。
它强制父容器像表格单元格一样表现，会忽略 margin、影响 flex 或 grid 父级布局，且无法与 transform 或动画良好配合。
- 需要两层 wrapper：外层
table，内层table-cell，结构冗余 - 子元素若设
float或position: absolute，vertical-align失效 - 在 CSS Grid 布局中混用
table-cell极易引发不可预测的尺寸计算
除非维护十年以上老系统且不能改 HTML 结构，否则别碰。
