根本原因是父容器未设display: flex且无明确高度，导致交叉轴无可用空间；align-items只控制子元素在交叉轴上的位置，不改变其内部排版。
align-items 为什么没让子元素垂直居中
根本原因是 align-items 只在交叉轴（cross axis）上起作用，而默认 flex-direction: row 时，交叉轴是垂直方向——所以它本该管垂直对齐。但常见失效不是属性写错了，而是前提条件没满足：
- 父容器没设
display: flex或display: inline-flex（比如误写成display: block） - 容器高度未明确：若靠内容撑开（
height: auto），交叉轴长度为 0，align-items: center实际已生效，但“没空间可居中” - 子元素自己写了
align-self: flex-start，覆盖了父级的align-items - 子元素是纯文本节点（无标签包裹），IE11 或某些旧引擎会把它当匿名项处理，对齐行为异常
多列布局下 align-items 的实际作用范围
align-items 对所有直接子元素生效，但它对齐的是“每个子元素整体”，不是子元素内部的内容。比如你有三列 div，每列里有一段文字和一张图：
- 它会让这三列
div在容器高度方向上“顶部/中部/底部对齐”，而不是让每列里的文字和图片彼此垂直居中 - 若想让每列内的图文垂直居中，得在每列内部再套一层
display: flex+align-items: center - 注意
flex-direction: column会反转主轴和交叉轴：此时align-items控制的是水平对齐，容易误判
单个子元素垂直居中的更简方案
如果父容器只有一个子元素，不用记 justify-content 和 align-items 哪个管哪个轴，直接用 margin: auto：
```css
.parent {
display: flex;
height: 300px; /* 必须有高度 */
}
.child {
margin: auto; /* 自动吸收上下左右剩余空间 */
}
```
- 这个方案不依赖
flex-direction，也不受交叉轴方向影响 - 仅适用于**唯一直接子元素**；多个子元素时，
margin: auto会让它们全部挤在中间 - 比
align-items: center+justify-content: center更少出错，也更易读
IE11 兼容性必须处理的细节
IE11 对 align-items 支持不完整，尤其在嵌套 flex 或含 img 的场景下容易偏移 1–2px：
- 加
-ms-flex-align: center到父容器，作为兜底 - 避免对
img直接设align-items: center，改用给img加margin: auto - 不要用
min-height配合align-items—— IE11 在min-height容器里无法正确计算交叉轴尺寸，必须用固定height - 多行文本垂直居中时，务必用
span或div显式包裹文字，别依赖裸文本节点
最常被忽略的一点：align-items 永远不会改变子元素自身的尺寸或内部排版，它只决定子元素在父容器交叉轴上的位置。想控制文字在块内居中，得用 line-height、display: flex + flex-direction: column 或 grid，而不是指望 align-items 穿透到子元素内部。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
