父容器必须有明确高度，否则 align-items: center 垂直居中失效；推荐 min-height: 100vh，注意 body/html 高度设置、移动端 safari 兜底、避免误用 align-content、保持 flex-direction: row、子元素勿脱离文档流、确保是直接子元素。
父容器必须有明确高度，否则垂直居中一定失效
浏览器计算 align-items: center 依赖交叉轴（默认为垂直方向）的尺寸。如果父容器没设 height 或 min-height，它实际高度很可能为 0，align-items 就没“中点”可对齐——看起来完全没反应。
- 最简方案：
min-height: 100vh（推荐，语义清晰、兼容性好） - 若父容器是
，需同步处理html：加html { height: 100%; }，再设body { height: 100%; } - 移动端 Safari 的
100vh在地址栏收起/展开时会跳变，可加兜底：min-height: -webkit-fill-available - 避免只写
height: auto或依赖内容撑高——Flex 居中不等“内容来填满”
justify-content 和 align-items 必须同时设置，且不能互换用途
它们分别控制主轴和交叉轴，方向由 flex-direction 决定。默认 flex-direction: row 时：justify-content 管水平，align-items 管垂直。
- 只写
justify-content: center→ 只水平居中；只写align-items: center→ 只垂直居中 - 误用
align-content: center：它只对多行 Flex 容器（flex-wrap: wrap且真换行）生效，单行无效 - 若改了
flex-direction: column，justify-content就变成管垂直，align-items反而管水平——此时仍能居中，但逻辑易混淆，建议保持默认row
子元素不能脱离文档流或被干扰样式覆盖
Flex 居中行为由父容器统一控制，子元素应保持“自然状态”。任何脱离流或强干预的样式都可能让居中失效。
-
position: absolute的子元素已脱离文档流，align-items对其完全无效 - 不要给子元素设
margin: auto：虽在某些简单场景下看似有效，但嵌套时极易与父级align-items冲突 - 避免设
flex: 1、width: 100%或height: 100%，除非业务明确需要拉伸——这些会破坏默认的居中流 - 内联元素（如裸文本）可能因基线对齐产生视觉偏移，建议包一层
<div> 或设 <code>display: inline-block直接子元素才受控制，嵌套 wrapper 会导致失效
justify-content和align-items只作用于弹性容器的**直接子元素**。DOM 中一旦插入中间 wrapper，居中就断链了。- ✅ 正确：
<div class="container"><div class="box"></div></div>→.box受.container控制 - ❌ 失效：
<div class="container"><div class="wrapper"><div class="box"></div></div></div>→.box是.wrapper的子元素，.container的align-items不影响它 - 调试技巧：用浏览器开发者工具检查元素层级，确认目标元素是否为 Flex 容器的直接子节点
justify-content和align-items看起来就像“失灵”了一样。 - ✅ 正确：
