父容器必须启用flex上下文：先确认display为flex或inline-flex；再确保交叉轴有可计算高度；子元素需是有效flex项目且未脱离文档流；主轴方向由flex-direction决定，需同步检查。
父容器是否真正启用了Flex上下文
写了 justify-content: center 却没反应，第一件事不是调子元素，而是查父容器有没有生效的 display: flex。很多情况是：样式被覆盖、CSS-in-JS 动态注入失败、或第三方组件（如 Ant Design 的 Button）内部已设 display: inline-flex，导致你写的规则没机会起作用。
快速验证方法：
在控制台运行 getComputedStyle(el).display，确认返回值确实是 "flex" 或 "inline-flex"；
如果看到 "block" 或其他值，说明 Flex 上下文根本没建立。
- 检查是否有全局 reset.css 或 UI 库样式重置了
display - 用浏览器开发者工具的 “Computed” 面板，直接看
display是否被标记为“已计算”且值正确 - 避免在子元素上写
display: contents—— 它会让子元素“消失”于 flex 项目列表中
交叉轴尺寸是否可计算
align-items: center 失效，90% 是因为父容器在交叉轴（默认为垂直方向）上没有可计算的高度。比如 height: auto、min-height: unset，或仅靠内容撑开，都会让 align-items 找不到“中”在哪。
移动端尤其典型：写 height: 100vh 后，Safari 地址栏收放会触发视口高度跳变，top: 50% 类似逻辑也会错位。
- 优先用
min-height: 100dvh替代height: 100vh，现代浏览器支持良好 - 临时调试时，给父容器加
border: 1px solid red，看它是否真占位；不占，说明高度塌了 - 别依赖
line-height去“假装有高”——它只影响行内内容渲染，对 flex 轴心计算无效
子元素是否被识别为有效 flex 项目
图标、多行文本、<img> 或 <svg></svg> 默认是 inline 元素，在 flex 容器里若未显式设 display: block 或 inline-block，就可能卡在 baseline 对齐逻辑里，align-items 对它不起作用。
更隐蔽的是：加了 position: absolute 的子元素，已经彻底脱离文档流，不再是 flex 项目——justify-content 和 align-items 对它完全无效，连 align-self 都没意义。
- 检查子元素是否意外设置了
float、position: absolute/fixed - 对 SVG 或图片，加一句
display: block或vertical-align: top（后者仅限 inline 场景） - 如果必须用绝对定位（如遮罩层、Tooltip），就放弃 flex 居中逻辑，改用
position: relative父容器 +top: 50%+left: 50%+transform: translate(-50%, -50%)
主轴方向是否被隐式修改
justify-content 和 align-items 的作用轴，由 flex-direction 决定。默认 row 时，justify-content 管水平，align-items 管垂直；一旦改成 column，角色立刻互换——但很多人只盯着属性名，忘了查当前值。
第三方组件、CSS-in-JS 模块、甚至某处 * { flex-direction: column } 的全局污染，都可能导致行为反直觉。
- 在控制台运行
getComputedStyle(el).flexDirection，确认当前值是不是你预期的 - 不要假设“没写就是默认”，有些 UI 库会在按钮、卡片等组件内部设
flex-direction: column - 保险写法：始终同时写
justify-content: center和align-items: center，不管主轴怎么变，两个轴都覆盖
真正卡住的时候，往往不是代码写错了，而是你一边想用 flex 的语义化居中，一边又用 position: absolute 或 float 强行接管位置控制——它们不共存。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
