Flex容器需设明确高度（如height: 100dvh）才能使align-items: center生效，因垂直居中依赖交叉轴尺寸；父容器高度为auto时交叉轴长度为0，导致居中失效。
flex 容器必须有明确高度才能让 align-items: center 生效
很多人写完 display: flex 和 align-items: center 发现没反应，根本原因是父容器没有设定高度。Flex 的垂直居中依赖于容器的交叉轴（cross axis）尺寸，而默认情况下块级元素高度由内容撑开，height: auto 时交叉轴长度为 0，自然无法居中。
- 给父容器设
height（如height: 300px或min-height: 100vh） - 用
vh单位时注意：100vh包含整个视口，可能被地址栏遮挡，可改用100dvh（现代浏览器支持） - 若父容器是
body或html，记得先清除默认 margin 并设height: 100%
子元素不能同时设 margin: auto 和 align-items: center
margin: auto 在 flex 容器中对齐逻辑和 align-items 冲突，尤其在单行 flex 中，margin: auto 会抢占垂直方向控制权，导致 align-items 失效或行为异常。
- 只用
align-items: center就够了，不需要额外加margin: auto - 如果想让某个子项单独居中（其他不居中），用
align-self: center更精准 - 水平居中请配合同用
justify-content: center，不是靠margin
遇到 align-items: center 不生效，先检查这些
常见失效场景往往不是语法错，而是布局上下文干扰：
- 父容器被设了
flex-direction: column—— 此时交叉轴变成水平方向，align-items控制的是“左右”，不是“上下” - 子元素本身有
vertical-align（对 inline 元素无效，且与 flex 无关） - 父容器外层有
transform、position: absolute或overflow: hidden截断了渲染区域 - 用了 CSS-in-JS 或框架（如 React + Tailwind），实际生成的 class 顺序覆盖了你的样式
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100dvh; /* 关键：必须有高度 */
margin: 0;
}
<p>.item {
/<em> 不要加 margin: auto </em>/
/<em> 不要设 vertical-align </em>/
}</p>Flex 垂直居中看似简单，但真正卡住人的地方几乎都出在容器高度缺失或方向理解偏差上。写完别急着查文档，先打开开发者工具看一眼父容器的 computed height 和 flex-direction。
立即学习“前端免费学习笔记（深入）”；
