align-items失效主因是父容器未启用flex布局或缺乏交叉轴高度：必须设display: flex且父容器有明确高度（如min-height: 100vh），同时确保子元素未脱离文档流或显式限制尺寸。
align-items 失效，90% 的情况不是属性写错了，而是父容器没撑开高度或根本没进 Flex 布局。
父容器没设 display: flex
这是最常被忽略的前提——align-items 只对 display: flex 或 display: inline-flex 的容器生效。加在子元素上、或父元素是 block/grid 时，该属性直接被浏览器忽略（开发者工具里会显示为划掉状态）。
- 检查是否误写了
display: flexbox、display: -webkit-flex（旧前缀已过时）或漏了冒号 - 确认没被其他样式覆盖，比如某处写了
display: block !important - 若用预处理器（如 Sass），检查嵌套层级是否导致最终生成的 CSS 选择器未命中目标父容器
父容器交叉轴方向没有明确高度
当 flex-direction: row（默认）时，交叉轴是垂直方向；align-items: center 要起作用，父容器必须有可计算的“垂直空间”。如果父容器 height: auto 且内部内容没撑高它，就等于让浏览器把子元素居中到一个“无限高”的区域里——视觉上还是贴顶。
- 给父容器加
height: 100vh或更稳妥的min-height: 100vh - 避免只靠内容撑高，尤其在移动端，
body默认margin会导致100vh实际变小，记得加body { margin: 0; } - 嵌套 Flex 容器时，中间层若没设
min-height: 0，可能阻断子项的拉伸能力（尤其当子项用了flex: 1）
flex-direction 改变后主/交叉轴混淆
很多人记成“align-items 就是垂直居中”，其实它始终作用于交叉轴，而交叉轴由 flex-direction 决定：
-
flex-direction: row→ 主轴水平 →justify-content控制左右，align-items控制上下 -
flex-direction: column→ 主轴垂直 →justify-content控制上下，align-items控制左右 - 若想在列布局中垂直居中子项，该用的是
justify-content: center，而不是死守align-items
子元素脱离文档流或显式设了尺寸
以下情况会让 align-items 失效或表现异常：
- 子元素写了
position: absolute或float→ 它不再是 flex item，对齐规则完全不适用 - 子元素设了
height、min-height或align-self: flex-start→ 覆盖了align-items的统一控制 - 子元素是行内元素（如
span）且未设display: block或position: relative→ 在某些浏览器中对齐可能不触发重绘
真正棘手的点往往藏在组合场景里：比如父容器有 transform 触发了 BFC，或嵌套 Flex 中某一层忘了 min-height: 0，又或者 IE10 下连 align-items: flex-start 都得写成 -ms-flex-align: start。这些边界条件不常出现，但一旦撞上，调试成本远高于改一行 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
