现代项目优先用display: flex或display: grid；老项目或需兼容ie9的场景，选position: absolute + transform: translate(-50%, -50%)；其他方法限制多、过时，不建议主用。
直接说结论：现代项目优先用 display: flex 或 display: grid；老项目或需兼容 IE9 的场景，选 position: absolute + transform: translate(-50%, -50%)；其他方法要么限制多、要么已过时，不建议主用。
flex 居中：父容器设 display: flex 就够了
这是目前最可靠、写法最简的方案，不需要知道子元素尺寸，也不依赖额外 hack。
-
justify-content: center控制水平居中，align-items: center控制垂直居中，两者合起来就是完全居中 - 父容器必须有明确高度（比如
height: 300px或min-height: 100vh），否则子元素可能“看不见”——因为 flex 容器默认不撑高 - 如果父容器是
body或html，记得先设height: 100%或min-height: 100vh，否则align-items: center无效 - 多个子元素会一起居中排列，不是叠在一起——这点和绝对定位不同，要留意是否符合需求
grid 居中：一行代码 place-items: center
比 flex 更简洁，但兼容性略弱（IE 完全不支持，Safari 10.1+ 才稳定）。
-
place-items: center是justify-items: center+align-items: center的简写，对单个子元素效果等同 flex - 如果父容器只放一个子元素，
display: grid+place-items: center几乎零配置，连height都不一定需要（grid 自动处理基线） - 注意不要和
place-content混用：place-content管的是整个网格轨道的分布，不是子元素对齐 - 在复杂布局中，grid 的优势才真正体现；纯居中场景下，它和 flex 效果接近，选哪个主要看团队规范或已有技术栈
absolute + transform：兼容性好但容易漏掉 relative
这是最常翻车的写法——看似简单，实则有隐藏依赖。
- 子元素必须设
position: absolute，且父元素**必须**设position: relative（或absolute/fixed），否则top: 50%会相对于视口定位 -
transform: translate(-50%, -50%)偏移的是元素自身宽高的 50%，所以它天然支持未知尺寸，这点比margin: -xxxpx强得多 - 如果父容器设置了
overflow: hidden，而子元素因 transform 超出边界，可能被意外裁剪——这不是 bug，是渲染行为，得提前预留空间或换方案 - 移动端软键盘弹出时，
top: 50%可能按错误视口计算，导致元素偏移；此时 flex/grid 更稳
其他方法为什么一般不用
像 margin: auto 配合 position: absolute（四边设 0）、table-cell + vertical-align、line-height 匹配高度等，都有明显短板：
-
margin: auto在绝对定位中生效，但要求子元素**定宽高**，否则不居中；而且 Safari 旧版本有兼容问题 -
table-cell方案语义混乱，display: table-cell会让元素失去块级特性（比如width: 100%失效），维护成本高 -
line-height只适用于单行文本，且一旦内容换行或字体缩放，就立刻失效，属于“看起来能用，实际上脆弱”的典型 - 所有基于
calc()或负 margin 的方案，都得手动算尺寸，既难维护又易出错，除非你真在写像素级控制的动画 UI
真正该花时间确认的，其实是父容器的尺寸来源和定位上下文——大部分“居中失败”，根本不是居中方法错了，而是参照物没立住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
