Flex居中失效主因是依赖链断裂：容器未设高度、子元素非有效Flex项目、flex-direction影响轴向判断、margin:auto冲突或IE兼容问题。
Flex 元素没居中，大概率不是属性写错了，而是容器或子元素的状态不符合 Flex 居中的基本前提。
父容器没设高度，align-items: center 就是空转
Flex 的 align-items 控制交叉轴对齐（默认垂直方向），但它需要一个可计算的交叉轴尺寸。如果父容器高度是 auto、0 或未显式声明，浏览器就“不知道往哪中”。
- 移动端常见：
body或外层div没设min-height，内容一短，容器就塌了 - 解决方案优先用
min-height: 100dvh（动态视口高），比100vh更稳，避免 Safari 地址栏收放跳动 - 兼容老浏览器？用 JS 注入
--vh变量，再通过calc(var(--vh) * 100)计算 - 别依赖
line-height或vertical-align回退——它们对多行文本和 Flex 项完全不可靠
justify-content 和 align-items 作用轴被 flex-direction 绑定
这两个属性不固定管“水平”或“垂直”，它们的作用方向由 flex-direction 决定。默认 row 时，justify-content 管水平，align-items 管垂直；一旦改成 column，角色就互换。
- 现象：加了
justify-content: center却没水平居中？先查 computed 样式里的flex-direction，别只看 CSS 文件里有没有写 - 第三方库（如 Ant Design）可能在组件内部设了
flex-direction: column，导致你写的justify-content实际在控垂直 - 调试快捷方式：
getComputedStyle(el).flexDirection直接在控制台验证当前值 - 想保险？同时写
justify-content: center和align-items: center，无论主轴方向如何，都能覆盖两个轴
子元素脱离了 Flex 项目身份
Flex 居中只对「Flex 项目」（即 display: flex 容器的直接子元素）生效。一旦子元素脱离这个身份，所有 justify-content/align-items 都失效。
立即学习“前端免费学习笔记（深入）”；
-
position: absolute或fixed：子元素已脱离文档流，不再是 Flex 项目；此时得用top: 50%+transform: translate(-50%, -50%)，且父容器必须是position: relative -
float：同上，彻底退出 Flex 布局体系 -
margin: auto冲突：它在 Flex 中有特殊行为（吸走剩余空间），会覆盖justify-content和align-items，二者别混用 - SVG 图标：默认是
inline元素，受vertical-align: baseline干扰；必须加display: block或inline-block，并配viewBox="0 0 W H"
为什么 margin: auto 有时也不起作用
它能在 Flex 容器里实现单个子元素的双轴居中，但条件比想象中严格。
- 子元素不能是弹性项：不能有
flex: 1、flex-grow: 1或flex-basis: 0，否则空间被抢占，margin: auto失效 - 子元素需有明确宽高：比如
width: 200px或width: fit-content；纯inline元素（如span）要加display: block - IE10–11 仅支持主轴方向，交叉轴仍需回退到
align-items: center - 它和
justify-content+align-items是两种思路：前者是“单个子元素专属”，后者是“整行/列批量对齐”，选哪个取决于布局意图
真正卡住的时候，往往不是漏写了某个属性，而是没意识到 Flex 居中是一套依赖链：容器得是 Flex 上下文 → 容器得有高度 → 子元素得是有效 Flex 项目 → 主轴方向得心里有数。缺一环，整个居中逻辑就断了。
