父容器未设height或min-height导致align-items: center失效，因其依赖交叉轴可计算高度；需显式设置min-height: 100vh等值，并确保display: flex生效、子元素未脱离文档流、flex-direction方向匹配对齐需求。
父容器没设 height 或 min-height，align-items 就是摆设
写了 align-items: center 却不居中？八成是父容器高度塌陷了。flex 的交叉轴对齐必须有可计算的轴长，height: auto 且无内容撑开时，实际高度为 0，“居中”就无从谈起。
常见现象：.wrapper { display: flex; align-items: center; } 但子元素仍贴顶；用开发者工具看 computed styles，会发现父容器 height 是 0。
- 全屏场景优先用
min-height: 100vh（比height: 100vh更稳妥，防 iOS Safari 地址栏缩放跳变） - 若父容器是
<body>，记得加html, body { height: 100%; margin: 0; } - 用
min-height: -webkit-fill-available可兜底部分 Safari 行为 - 避免只靠 padding 或兄弟元素“偶然撑高”，要显式声明高度约束
父容器 display 不是 flex，align-items 直接被忽略
align-items 只在 display: flex 或 display: inline-flex 的容器上生效。写在普通 div、section 或已设 display: block 的元素上，浏览器压根不解析该属性。
容易误判的点：CSS 里写了 display: flex，但被后续规则覆盖（比如框架注入的样式、!important 冲突、或媒体查询未命中）。
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具，切到 “Computed” 标签页，确认
display确实是flex - 检查是否被
float、position: absolute或display: contents等属性干扰导致 flex 失效 - 别在子元素上写
align-items——它只作用于 flex 容器自身，对子元素无效
子元素用了 position: absolute 或 margin: auto，绕过了 align-items
一旦子元素脱离文档流，align-items 就彻底失效。常见干扰项包括：
-
position: absolute/fixed：子元素已不在 flex item 流中 -
margin: auto：在 Safari 中会与 flex 居中冲突，导致上下偏移 -
align-self: flex-start等值：显式覆盖了父级align-items，优先级更高 -
flex: 1或width: 100%：虽不直接冲突，但可能挤压交叉轴空间，间接影响视觉居中感
排查建议：临时注释掉子元素所有 position、margin、align-self 相关样式，看是否恢复居中。
flex-direction 改成 column 后，align-items 突然管水平了
默认 flex-direction: row 时，align-items 控制垂直对齐；一旦改成 column，主轴变垂直、交叉轴变水平，align-items: center 就变成水平居中了——这不是 bug，是设计如此。
典型误用：想让一列按钮水平居中，却只写 align-items: center 而忘了 justify-content: center，结果按钮垂直方向居中了，水平还是左对齐。
- 单行布局下，
justify-content和align-items必须配对使用才能实现双轴居中 - 不要依赖
align-content: center来垂直居中——它只对多行换行（flex-wrap: wrap且真换行）有效，单行完全没反应 - 如果只是单个子元素居中，
place-items: center（grid）语义更清晰，但注意 IE11 不支持
