align-items: center 垂直居中失效主因是父容器交叉轴无高度；它在已有空间内均分剩余空间，非主动推元素；需确保父容器有明确高度（如min-height: 100vh）或使用margin: auto等替代方案。
align-items: center 能垂直居中，但**几乎总是没效果**——不是写错了，而是父容器在交叉轴（默认为垂直方向）上没有可分配的高度。
为什么 align-items: center 看起来不工作
Flex 的 align-items 不是“把元素往上推”，而是在**已有交叉轴空间内均分剩余空间**。如果父容器高度为 auto、0px 或未声明任何高度，浏览器就无法计算“中间在哪”。
- 常见现象：子元素顶部紧贴父容器上边缘，控制台无报错，开发者工具里看到父容器
height: 0px或min-height: auto - 临时验证法：给父容器加
border: 1px solid red或background: #eee，肉眼确认它是否真占位 - 最稳妥的兜底写法：
min-height: 100vh（比height: 100vh更安全，内容超长时不截断） - 若父容器是
，必须同步设html, body { height: 100%; margin: 0; }
justify-content 和 align-items 到底谁管哪个方向
它们的作用方向完全由 flex-direction 决定，默认 row 时：
-
justify-content: center→ 控制**主轴**（水平）→ 实现水平居中 -
align-items: center→ 控制**交叉轴**（垂直）→ 实现垂直居中 - 一旦改成
flex-direction: column，两者角色互换：justify-content开始管垂直，align-items反而管水平 - 别为了“绕开高度问题”强行改
column，语义混乱且易出错
嵌套结构或绝对定位时，align-items 为什么失效
align-items 只对**弹性容器的直接子元素**生效，且该子元素必须在文档流中。
- 如果 DOM 是
<div class="outer"><div class="inner"><div class="target"></div></div></div>，那么.target不受.outer的align-items控制 - 解决方法：让中间层（如
.inner）也加display: flex; justify-content: center; align-items: center; -
position: absolute或fixed的元素已脱离文档流，不再是 Flex Item ——align-items对它完全无效 - 此时应改用
position: relative（父容器）+top: 50%; left: 50%; transform: translate(-50%, -50%)
单个子元素时，margin: auto 是更隐蔽的替代方案
在 Flex 容器中，给**唯一子元素**设置 margin: auto，它会同时吸收主轴和交叉轴的剩余空间，实现全向居中。
- 适用前提：父容器是
display: flex，且子元素是该容器的**唯一直接子项** - 优势：无需关心
flex-direction变化，也不依赖父容器显式高度（只要它有可分配空间） - 注意：若子元素设置了
width或height，margin: auto仍有效；但若它是inline元素（如span），需先设display: block或inline-block - 兼容性比
align-items更好，尤其在旧版 Safari 中对img的垂直对齐偏差更小
真正卡住人的从来不是属性名记不住，而是花十分钟才发现父容器被 overflow: hidden 塌陷了，或者某个祖先元素悄悄加了 display: inline —— 这些细节不报错，只让 align-items: center 静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
