结论：没有“通用最优解”，只有“当前场景下最稳的那一个”；flex居中需父容器有显式高度，absolute+translate需定位上下文，grid place-items语义强但兼容有坑，margin:auto仅适用定宽高元素。
直接说结论：没有“通用最优解”，只有“当前场景下最稳的那一个”。选错方案，轻则居中失效，重则在 Safari 或旧安卓 WebView 里偏移几像素、或滚动时飘走。
flex 居中必须设父容器高度
写 display: flex; justify-content: center; align-items: center 没效果？八成是父容器高度塌陷了。flex 的 align-items 在交叉轴（垂直方向）上需要一个明确的长度参考，否则“center”无从计算。
- 父容器必须有显式高度：比如
height: 100vh、min-height: 300px，或者被子内容撑开（但动态内容可能撑不开） - 避免和
margin: auto混用——尤其在 Safari 中会冲突，导致上下偏移 - 子元素若为
display: block且宽度 100%，不影响垂直对齐，但容易误判为整体失效 - IE10 及以下不支持，需回退到其他方案
absolute + translate(-50%, -50%) 要配好定位上下文
这个组合兼容性好（IE9+），但不是“一贴就灵”。top: 50% 和 left: 50% 的基准是父容器，而 transform: translate(-50%, -50%) 的百分比是相对于自身宽高——这点常被误解。
- 父容器必须设
position: relative（或absolute/fixed），否则top/left会相对于 viewport 定位，滚动时错位 -
translate(-50%, -50%)必须写在一起，不能拆成translateX()和translateY()单独调用 - 子元素宽高动态变化（如图片未加载完、字体未就绪）时会有短暂闪动，可加
min-height或aspect-ratio缓解 - 不依赖子元素尺寸固定，比负 margin 方案更灵活
grid 的 place-items: center 语义最强但兼容有坑
display: grid; place-items: center 是目前代码最简、意图最清晰的方案，但它不是 flex 的万能替代。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- Chrome 57+ / Firefox 52+ / Safari 10.1+ 支持；IE11 需降级为
justify-items: center; align-items: center - 对所有直接子元素生效，不要求子元素设
grid-area - 若父容器已有复杂
grid-template-areas或轨道定义，place-items可能覆盖原有对齐逻辑 - 它只适用于单个子元素居中场景，多子项布局时慎用
margin: auto + 四边定位仅限定宽高元素
写 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto 看似简洁，但限制极硬。
- 子元素必须有明确的
width和height（哪怕用max-width+fit-content也不行） - Chrome/Firefox 行为一致；Safari 15.4 之前版本存在 bug，可能偏移几个像素
- 优势是不依赖
transform，在某些旧版安卓 WebView 中更稳 - 无法应对响应式宽高（如
width: 80%或height: fit-content）
真正容易被忽略的点不在写法本身，而在上下文约束：父容器是否脱离文档流、是否被其他样式干扰（比如 float、position: absolute）、子元素是否意外触发 BFC 或改变了默认 display 类型。居中失效时，先查父容器 computed height 和 position，再看子元素 display 和尺寸声明，比反复改 CSS 更快。
