绝大多数“居中失败”不是代码写错，而是未理解justify-content和align-items分别控制主轴与交叉轴对齐，且依赖父容器设display:flex并具备可计算高度；justify-content: center仅在主轴方向生效，主轴由flex-direction决定，默认row时管水平，column时管垂直；align-items: center需父容器有明确高度（如100vh）才有效；单元素居中推荐margin: auto，但要求父容器为flex且子元素未脱离文档流。
绝大多数“居中失败”不是代码写错了，而是没搞清 justify-content 和 align-items 各管哪根轴，或者父容器根本没撑开高度。
为什么 justify-content: center 没效果？
它只在主轴方向生效，而主轴由 flex-direction 决定。默认是 row（水平），所以 justify-content: center 控制的是水平对齐；如果改成了 column，它就变成控制垂直对齐了。
- 检查父容器是否设置了
display: flex—— 没这句，所有 flex 属性都无效 - 确认没意外覆盖：比如子元素用了
float或position: absolute，它们会脱离 flex 流，justify-content对其无效 - 如果想让单个子元素在二维空间里居中，必须同时设
justify-content: center和align-items: center -
justify-content对换行后的多行项目不起作用，那是align-content的职责
align-items: center 为啥子元素还是不垂直居中？
常见原因是父容器没有明确高度，尤其是 height: 100% 这种写法，在没有祖先高度约束时等于 0。
- 最稳的方案是用
height: 100vh（视口高度），尤其做全屏居中时 - 如果父容器是嵌套结构，确保每一层父级都有可计算的高度（比如
html, body { height: 100%; }） -
align-items是针对整行项目的交叉轴对齐，不能单独控制某个子项——想单独居中某一个，得用align-self: center或更干脆的margin: auto - 注意：文本内容本身需要
line-height或display: flex配合才能真正在容器内垂直居中，单纯靠align-items只影响块级子元素
移动端 Flex 布局滚动卡顿怎么解？
某些 Android WebView（特别是旧版）在遇到 flex-wrap: wrap + 百分比宽度子项时，会反复触发重排，导致滚动掉帧。
立即学习“前端免费学习笔记（深入）”；
- 把
width: 50%改成flex: 0 0 50%，等价于flex-grow: 0; flex-shrink: 0; flex-basis: 50% - 避免在 flex 容器里混用
width和flex相关属性，容易触发浏览器内部冲突 - 如需响应式换行，优先用
flex-wrap: wrap+ 固定flex-basis，而不是依赖百分比 +flex-grow - 真机测试比模拟器更可靠，Chrome DevTools 的 Rendering 面板可以开启 “Paint flashing” 查看重绘区域
不用 justify-content 和 align-items 怎么让子元素居中？
margin: auto 是更底层、更可靠的单元素居中方式，它不依赖主轴/交叉轴概念，也不要求知道父容器高度是否已知。
- 父容器必须是
display: flex，且子元素不能是float或absolute - 只要子元素有宽高（或内容撑开），
margin: auto就能同时实现水平和垂直居中 - 它甚至能在
flex-direction: column下正常工作，比align-items更“无感” - 注意：这个技巧对多个子元素无效，仅适用于单个目标元素
真正容易被忽略的点是：flex 布局的“居中”本质是容器行为，不是子元素自己的样式。一旦父容器尺寸不可控、或者子元素脱离了 flex 流，所有对齐属性都会静默失效——与其反复调参数，不如先确认容器是否真的“存在”。
