直接用 align-items: center 就能实现容器内单行子元素垂直居中，但前提是容器必须是 flex 容器（即设置了 display: flex 或 inline-flex），且子元素不能是绝对定位或浮动元素；常见错误是父容器未设 display: flex，导致 align-items 无效，因该属性仅在 flex 上下文中生效。
直接用 align-items: center 就能实现容器内单行子元素垂直居中，但前提是容器必须是 Flex 容器（即设置了 display: flex 或 display: inline-flex），且子元素不能是绝对定位或浮动元素。
为什么只设 align-items 不生效？
常见错误是忘了声明父容器为 Flex 上下文。CSS 中 align-items 是 Flex 专属属性，对普通 div、span 等块/行内元素完全无效。
- 必须先设置父容器
display: flex（或inline-flex） - 如果子元素用了
position: absolute，它已脱离文档流，align-items对其无影响 - 若子元素是多个且高度不一致，
align-items: center会让它们的交叉轴（此处为垂直方向）中心对齐，不是“整体内容垂直居中”——这是正常行为，不是 bug
align-items 和 justify-content 的分工区别
align-items 控制的是**交叉轴**（cross axis）对齐，而 justify-content 控制**主轴**（main axis）对齐。Flex 默认主轴是水平方向（flex-direction: row），所以：
-
align-items: center→ 垂直居中（因为交叉轴是 y 轴） -
justify-content: center→ 水平居中（因为主轴是 x 轴） - 要真正“水平 + 垂直居中”，两个都要写：
justify-content: center; align-items: center; - 如果改了
flex-direction: column，主轴变成 y 轴，此时align-items就控制水平对齐了
兼容性与替代方案的取舍
现代浏览器（Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+）都支持 align-items，IE10/11 需加 -ms- 前缀且行为有偏差（比如不支持 stretch 在某些场景下的表现）。
- 如果必须兼容 IE10/11，建议用
display: -ms-flexbox+-ms-flex-align: center - 纯文本居中，
line-height+ 固定高度仍是最轻量方案，但仅限单行 - 避免用
vertical-align: middle试图居中块级元素——它只对 inline/inline-block 元素和表格单元格有效 - 不要为了居中给父容器加
height: 100vh后再用绝对定位 +transform，Flex 方案更简洁、可维护
真正容易被忽略的是：当子元素有 margin-top 或 margin-bottom 时，align-items: center 依然按子元素的 border box 计算中心点，不会自动抵消外边距——如果你看到“看起来没居中”，先检查 margin 是否干扰了视觉判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
