最可靠方案是 display: flex + justify-content: center + align-items: center；父容器需有明确高度，子元素自动居中且无需知道宽高；Grid 的 place-items: center 更适合二维布局；绝对定位+transform 适用于脱离文档流场景；所有方案均要求父容器有可计算高度。
直接用 display: flex + justify-content: center + align-items: center，这是最可靠、最易维护的方案。
Flex 布局：父容器设为 flex，子元素自动居中
不需要知道子元素宽高，也不用额外 wrapper 或 JS 计算。只要父容器有明确高度（比如 height: 400px 或 min-height: 100vh），子元素就能稳稳居中。
- 子元素可以是
div、img、span（会自动转为 flex item），甚至空元素或动态插入的内容 - 多个子元素会沿主轴和交叉轴同时居中 —— 如果你只想要单个元素居中，别忘了它不是“居中容器”，而是“居中行为”
- IE10+ 支持良好；IE9 及以下需降级，但当前项目基本可忽略
- 注意：父容器不能是
position: absolute且未设宽高，否则 flex 不会按预期撑开
Grid 布局：一行代码搞定，适合二维控制场景
当父容器本身就是网格容器（比如仪表盘、卡片列表），用 place-items: center 更自然，语义比 flex 更清晰。
-
display: grid+place-items: center等价于分别写justify-items: center和align-items: center - 对单个子元素效果和 flex 完全一致；对多个子元素，它控制的是每个 grid item 的对齐，而非整体布局流
- 兼容性略低于 flex（IE 完全不支持），但 Chrome/Firefox/Safari/Edge 16+ 都没问题
- 如果父容器已有
grid-template-columns或其他 grid 规则，place-items仍生效，但要注意是否被更细粒度的justify-self/align-self覆盖
绝对定位 + transform：脱离文档流时的备选方案
适用于弹窗、tooltip、loading 指示器这类必须脱离文档流、又不能依赖父容器 flex/grid 的场景。
立即学习“前端免费学习笔记（深入）”；
- 父容器需设
position: relative（否则top/left: 50%会相对于视口定位） - 子元素写
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 内联元素（如
span）要先加display: inline-block，否则transform对齐可能偏移 - 性能上无明显问题，但过度使用会导致布局逻辑分散 —— 同一页面混用 flex 居中和 absolute 居中，容易引发维护困惑
真正容易被忽略的点是：**父容器必须有可计算的高度**。无论用哪种方案，如果父容器高度为 auto 且内部没有内容撑开，居中就会失效 —— 这不是方法的问题，而是 CSS 渲染机制决定的。所以检查 height、min-height 或 flex-direction: column 下的父容器约束，比纠结用哪个居中技巧更重要。
