最稳方案是 display: flex + align-items: center，需父容器设 height 约束且不能同时用 margin: auto；次选 absolute + transform；grid 的 place-items: center 最简洁；table-cell 已淘汰。
用 flex 实现块级元素垂直居中最稳
现代浏览器下，display: flex + align-items: center 是最直接、最可控的方案。它不依赖父容器高度是否已知，也不需要 hack 或额外 dom 节点。
常见错误是只加了 justify-content: center（水平居中），漏掉 align-items: center，结果元素只水平居中、垂直依然贴顶。
- 父容器必须设
display: flex，且高度要有约束（比如height: 100vh或有内容撑开） - 子元素不能同时设
margin: auto（会和 flex 居中冲突，尤其在 Safari 中表现异常） - 如果子元素是单行文本，
line-height和height相等也能“看起来”居中，但这是假居中，换行就破功
div.container {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
}
绝对定位 + transform 适合老项目兼容
当目标浏览器要支持 IE10+，又不想改布局模型时，position: absolute 配合 transform: translate(-50%, -50%) 依然可靠。它不要求父容器是 flex 或 grid，只要父容器有定位上下文（position: relative）就行。
容易踩的坑是忘记给父容器加 position: relative，导致子元素相对于 viewport 定位，飘到页面左上角外。
- 子元素必须设
top: 50%和left: 50% -
transform: translate(-50%, -50%)是关键，不能写成translateX(-50%) translateY(-50%)（虽然等效，但多写易错） - 若子元素宽高动态（如图片未加载完），可能短暂闪动；可加
min-height或占位符缓解
.container {
position: relative;
height: 400px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
table-cell 布局现在基本不用了
display: table-cell + vertical-align: middle 曾是 IE8 时代的主流解法，但它强制把容器变成类表格行为：子元素会自动拉伸填满高度，文本会继承表格换行逻辑，且无法和 flex / grid 混用。
立即学习“前端免费学习笔记（深入）”；
除非维护一个十年没动过的后台系统，否则不建议新项目用。Vue/React 组件里硬套 table-cell，经常和组件自身 margin/padding 规则打架。
- 父容器需设
display: table，子容器设display: table-cell -
vertical-align: middle只对table-cell生效，对block或inline-block无效 - 父容器必须有明确高度，否则
table-cell高度塌陷，居中失效
grid 布局一行代码就能搞定
CSS Grid 的 place-items: center 是目前最简洁的写法，等价于 align-items: center + justify-items: center，适用于单个子元素居中场景。
注意它只对直接子元素生效，如果中间嵌套了一层 wrapper，那得在 wrapper 上用，而不是最外层容器。
- 父容器设
display: grid，再加place-items: center - 不需要指定
grid-template-rows或grid-template-columns，Grid 会自动创建单格隐式网格 - 部分旧版 Safari（place-items 支持不稳定，可降级为显式写两行
.container {
display: grid;
place-items: center;
height: 200px;
}
真正麻烦的不是选哪种方法，而是混用——比如在 flex 容器里又给子元素加绝对定位，或者一边写 grid 一边手动算 margin。居中本身很简单，难的是统一团队对布局模型的理解，以及别让“为了居中而居中”污染了原本清晰的结构语义。
