align-items: center 未垂直居中，最常见原因是容器缺少明确高度或子元素为 inline 元素；需同时满足：父容器为 flex、有交叉轴尺寸（如 height）、子元素非纯文本或已设为 block。
为什么 align-items: center 在 flex 容器里没让子元素垂直居中？
最常见原因是容器本身**没有明确高度**，或者子元素是 inline 元素（比如纯文本、<span>）且未设为 block 或 flex。flex 的 align-items 依赖容器的交叉轴尺寸——对 flex-direction: row（默认）来说，交叉轴就是纵轴，需要容器有可计算的高度。
- 容器高度为
auto（内容撑开），且无其他限制时，交叉轴“长度”为 0，居中无从谈起 - 子元素是内联级，可能被当作单行文本处理，
align-items对其基线行为影响有限 - 父容器不是块级或未脱离文档流（比如被
float或position: absolute干扰），导致高度塌陷
align-items: center 生效的前提条件
必须同时满足以下三点，否则表现不可预期：
- 父容器声明了
display: flex或display: inline-flex - 父容器有**明确的交叉轴尺寸**：对默认
flex-direction: row，就是要有height、min-height，或被约束在某个高度上下文里（如vh、flex 子项、绝对定位框） - 子元素不能是未包裹的纯文本节点；若只有文字，建议包一层
<div>或设display: block
div.container {
display: flex;
align-items: center;
justify-content: center;
height: 200px; /* 关键：必须有高度 */
border: 1px solid #ccc;
}
<p>div.container span {
display: block; /<em> 避免 inline 元素对齐异常 </em>/
}替代方案：当不能改容器高度时用 margin: auto
如果容器高度不可控（比如响应式卡片、内容动态变化），但子元素是块级且有固定宽高，可以直接对子元素用 margin: auto 实现居中——它在 flex 容器中会同时作用于主轴和交叉轴。
- 仅适用于单个子元素，或所有子元素一起包裹在一个内部容器里
- 子元素需有明确尺寸（
width/height）或max-width/max-height，否则automargin 可能失效 - 比
align-items更“强硬”，不依赖容器交叉轴计算
.container {
display: flex;
height: 100%;
}
<p>.centered-item {
margin: auto;
width: 200px;
height: 80px;
}调试技巧：快速验证是否真没生效
别只盯着 CSS 规则是否存在，要确认浏览器实际计算出的值：
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具，选中容器 → 查看
Computed面板，搜align-items，确认值是center且未被覆盖 - 同样在
Computed中检查height和cross size（Chrome DevTools 中会显示“Cross Size”），如果为0px，说明容器没撑开 - 临时加
outline: 1px solid red到容器和子元素，肉眼观察边界是否符合预期
flex 垂直居中失效，八成不是 align-items 写错了，而是容器高度没立住，或者子元素层级/显示类型没理清。
