align-items 在 flex 容器中不生效，主要因父容器高度未明确；需设置 height 或 min-height，并注意 flex-direction 对主/交叉轴的影响。
align-items 为什么在 flex 容器里不生效？
常见现象是给父容器加了 display: flex 和 align-items: center，但子元素没垂直居中——大概率因为父容器**高度未明确**。Flex 的 align-items 依赖容器的交叉轴尺寸，如果父容器高度由内容撑开（比如默认 height: auto），交叉轴（纵轴）就没有“可居中的范围”。
- 确保父容器有明确高度，例如
height: 100vh、min-height: 400px，或被上级设为flex后继承高度 - 检查是否意外设置了
flex-direction: column：此时主轴变垂直，align-items控制的是水平对齐，垂直居中得用justify-content: center - 避免子元素自身设置了
margin-top/bottom: auto或position: absolute，会覆盖 flex 对齐行为
align-self 覆盖 align-items 时要注意什么？
align-self 是作用在单个 flex 项目上的，优先级高于容器的 align-items。但它只在**交叉轴方向有效**，且前提是父容器是 flex 容器、且交叉轴有可用空间。
- 若父容器
flex-direction: row（默认），交叉轴是垂直方向，align-self: center才能垂直居中该子项 - 若父容器
flex-direction: column，交叉轴变成水平方向，此时align-self: center是水平居中，不是垂直 -
align-self: auto会回退到父容器的align-items值；align-self: stretch（默认）会让子项填满交叉轴，可能掩盖居中效果
只用 align-items 实现单个子元素垂直居中够不够？
够，但需满足两个硬性条件：父容器是 display: flex，且有明确的交叉轴尺寸（如固定高度或 min-height）。不需要额外写 justify-content，除非你也想水平居中。
div.container {
display: flex;
align-items: center; /* 垂直居中 */
height: 300px; /* 必须有高度 */
}如果同时要水平居中，补上 justify-content: center 即可。但注意：一旦子元素宽度超过容器，justify-content 可能导致溢出或滚动，而 align-items 不影响水平布局。
立即学习“前端免费学习笔记（深入）”；
为什么有时候 align-items:center 看起来“偏上”？
这不是 bug，而是字体基线和行内元素默认对齐方式干扰了视觉判断。尤其当子元素是纯文字或 <span></span> 时，浏览器按 baseline 对齐，而非盒子中心。
- 给子元素加
vertical-align: middle对 inline 元素无效（flex 项目默认是 block-level） - 真正有效的是确认子元素是块级且无额外
margin/padding，或用box-sizing: border-box统一盒模型 - 更稳妥的做法：子元素内部再套一层，用
display: flex+align-items: center居中文本本身（解决基线问题）
垂直居中的本质是“容器交叉轴尺寸可测量 + 对齐属性作用于正确轴向”，细节常藏在高度声明和 flex-direction 的组合里。
