align-items不生效的主因是父容器未设display: flex；其次需确认flex-direction方向以明确交叉轴，再检查子元素是否有足够高度或被隐藏。
flex 容器里 align-items 不生效？检查是否漏了 display: flex
很多新手写完 align-items: center 发现子元素纹丝不动，根本原因是父容器没设成 Flex 上下文。CSS 的 Flex 属性只在 Flex 容器内部起作用，align-items 是容器属性，不是子元素的样式。
- 必须给父元素显式设置
display: flex或display: inline-flex - 仅写
align-items而不设display: flex，浏览器完全忽略该声明 - 如果父元素是 且已有其他布局（如 float、inline-block），需先清除旧样式再启用 Flex
垂直居中失效？确认主轴方向和
align-items的作用范围align-items控制的是“交叉轴”上的对齐，而交叉轴取决于flex-direction。默认flex-direction: row，此时交叉轴是垂直方向，align-items才管垂直对齐；若改成column，交叉轴就变成水平方向，align-items就控制水平对齐了。- 默认行为（
flex-direction: row）：align-items: center→ 垂直居中 - 改成
flex-direction: column后：align-items: center→ 水平居中 - 想固定垂直居中又怕方向干扰？直接加
flex-direction: row显式声明
子元素高度为 0 导致看起来没居中？
align-items对内容有依赖align-items是按容器的交叉轴尺寸来对齐子项的，但如果子元素本身没高度（比如只有纯文本没设line-height或min-height），或者被overflow: hidden截断，视觉上会误判为“没对齐”。- 文字类子元素建议包裹在
或height: 100vh或min-height: 200px） - 避免对 Flex 容器设
height: 0或overflow: hidden后再期待内容可见 - 调试时可临时加
border: 1px solid red到子元素，看清它实际占位区域
.container { display: flex; align-items: center; justify-content: center; height: 300px; border: 1px solid #ccc; } .item { background: #4a90e2; color: white; padding: 12px 24px; }真正卡住人的往往不是语法，而是容器没触发 Flex、方向理解反了、或子元素实际不可见——这三处查一遍，90% 的“对齐失败”就解决了。
立即学习“前端免费学习笔记（深入）”；
- 默认行为（
