Flex居中失效的根本原因是父容器高度塌陷、子元素脱离文档流或flex-direction导致主/交叉轴错位；需确保父容器有明确高度、子元素为弹性项且未被absolute/float干扰。
没有“最适合”的方案，只有“最匹配你当前约束”的方案。选错不是技术问题，而是上下文误判。
先看元素类型：行内内容用 text-align: center，别硬套 margin: 0 auto
文字、<img>、<span> 默认是 inline 元素，给它们加 margin: 0 auto 或 justify-content: center 完全无效——浏览器根本不处理。
-
text-align: center必须写在父容器上，它控制的是“里面的内容怎么排”，不是“自己怎么摆” - 如果父容器里混着块级子元素（比如一个
<div>），它不会被text-align影响；想让它也居中，得单独设display: inline-block或换方案 - 这个方法只管水平，垂直方向靠
line-height（单行）或flex配合align-items，不能指望它一招通吃
块级元素水平居中：margin: 0 auto 看似简单，但三个条件缺一不可
它不是“写了就中”，而是“满足三件事才生效”：
- 目标元素必须是块级（
display: block或默认块级标签如<div>） - 必须显式设置
width或max-width（fit-content不行，100%也不行） - 父容器不能是
display: flex或display: grid——这两种布局会接管对齐逻辑，margin: auto直接被忽略
常见翻车点：在 Vue/React 组件里随手加了 margin: 0 auto，结果没效果，八成是父组件用了 flex 布局却没意识到。
立即学习“前端免费学习笔记（深入）”；
需要水平+垂直居中？优先查父容器高度和 display: flex 是否真生效
display: flex; justify-content: center; align-items: center 是现代项目首选，但失效频率极高，原因往往不在写法本身：
- 父容器没设
display: flex——align-items对非 flex 容器完全无效 - 父容器高度塌陷（比如只写了
width，没设height、min-height，内部又没内容撑开）—— flex 的交叉轴没长度可参考，“center”就无从算起 - 子元素用了
position: absolute或float—— 它们已脱离 flex 流，align-items对它们不起作用 - Safari 下混用
margin: auto和 flex 居中，会导致子元素上下偏移，务必避免
要兼容 IE9 或必须脱离文档流？position: absolute + transform: translate(-50%, -50%) 不是万能，但有硬门槛
它确实不依赖元素尺寸，但行为强绑定定位上下文：
- 父容器必须有
position: relative（或absolute/fixed）——否则top: 50%会相对于视口计算，一滚动就飘走 -
transform: translate(-50%, -50%)必须写完整，拆成translateX和translateY容易漏、难维护，且无收益 - 图片未加载完、字体未就绪时，宽高可能为 0，导致短暂闪动——可提前设
min-height或用aspect-ratio缓解 - 它不管子元素是否动态，这点比
margin负值方案灵活，但亚像素渲染可能导致 1px 偏差，尤其在高 DPI 屏幕上
真正容易被忽略的，是“包含块”的嵌套影响：如果父容器本身被缩放（transform: scale()）或设置了 overflow: hidden，百分比计算基准会意外变化，这时候居中就不再可靠。
