必须同时设置justify-content和align-items才能实现真正的水平垂直居中，因为justify-content控制主轴对齐（默认row时为水平）、align-items控制交叉轴对齐（默认row时为垂直），且父容器需设display:flex并具备明确高度（如height:100vh），否则align-items无效。
必须同时设置 justify-content 和 align-items 才能实现真正的水平垂直居中，但它们各自管的不是“水平”或“垂直”，而是主轴和交叉轴——这个方向由 flex-direction 决定。
为什么只写 justify-content: center 不行？
因为 justify-content 只控制主轴对齐。默认 flex-direction: row 时主轴是水平的，所以它只让子元素水平居中；垂直方向完全不管。常见错误就是以为写了 justify-content: center 就万事大吉，结果子元素还是贴顶。
- 父容器没设
display: flex→ 属性直接被忽略 - 容器高度为
auto（比如没设height或min-height）→align-items: center有作用，但“居中”的参考高度是 0，视觉上不动 - 子元素用了
position: absolute或float→ 脱离文档流，不再受 flex 对齐控制
justify-content 和 align-items 到底谁管哪边？
别记“justify 是水平、align 是垂直”，盯住 flex-direction：它指哪，哪就是主轴，justify-content 就管哪；另一个自动是交叉轴，归 align-items 管。
-
flex-direction: row（默认）→ 主轴水平：justify-content水平生效，align-items垂直生效 -
flex-direction: column→ 主轴垂直：justify-content控制上下，align-items控制左右 - 误设
flex-direction: column却还指望justify-content: center水平居中？那它其实在把子元素垂直居中
常见失效场景和调试建议
最常踩的坑不是属性写错，而是布局前提缺失。调试时优先确认这三件事：
立即学习“前端免费学习笔记（深入）”；
- 父容器是否真有
display: flex？检查是否被其他规则覆盖（比如用浏览器开发者工具看 computed 样式） - 容器在交叉轴方向是否有明确尺寸？
flex-direction: row时看height或min-height；column时看width或min-width - 子元素有没有设
height、min-height或flex-shrink: 0？这些会阻止align-items: stretch（默认值）拉伸，也可能干扰center的视觉表现
临时加 border: 1px solid red 和 min-height: 100vh 到父容器，能快速验证对齐是否真实发生，而不是“看起来没动”。
