align-items作用于flex容器的直接子元素，在交叉轴上统一控制其对齐方式；默认flex-direction:row时控制垂直对齐，column时控制水平对齐，需父容器设display:flex且有明确交叉轴尺寸。
align-items 在 flex 容器中到底对齐谁？
align-items 作用对象是 flex 容器的**直接子元素**，不是孙子或更深层级。它控制这些子元素在交叉轴（cross axis）上的对齐方式。当 flex-direction 是 row（默认）时，交叉轴是垂直方向，此时 align-items 才真正影响垂直对齐；若设为 column，交叉轴变成水平方向，align-items 就改管水平对齐了。
常见误用是给子元素自身加 align-items —— 这无效，因为该属性只在 display: flex 的父容器上生效。
为什么子元素没垂直居中？检查这三点
多数“不居中”问题不是 align-items 写错了，而是基础条件缺失：
- 父容器必须声明
display: flex，仅align-items: center不起作用 - 父容器需有明确高度（如
height: 200px或min-height: 100vh），否则高度由内容撑开，视觉上“看不出”居中 - 子元素不能设置
align-self: flex-start等覆盖值，否则会绕过父级align-items
align-items: center 和 align-content: center 的区别
这两个常被混淆，但作用完全不同：
-
align-items: center：对齐**每一行内**的子元素（单行或多行都适用） -
align-content: center：只在**多行 flex 容器**（即flex-wrap: wrap且子元素换行了）中起作用，用于对齐“行与行之间”的整体位置；单行时完全无效
想让单个子元素垂直居中，99% 场景只需 align-items: center + 父容器有高度。
兼容性与替代写法注意点
现代浏览器对 align-items 支持良好，但 IE10/11 存在两个典型坑：
- IE11 不支持
align-items: stretch在某些嵌套场景下的计算，建议显式设子元素height: auto - 如果父容器用了
min-height而非height，部分旧版 Safari 可能不触发垂直居中，可补一句height: 0; min-height: 100vh; - 极端兼容需求下（如需支持 IE9），得放弃 flex，改用
display: table-cell+vertical-align: middle，但语义和响应性会打折扣
实际项目里，只要父容器高度可控、不涉及复杂换行布局，align-items: center 就是最轻量可靠的垂直对齐方案。别忘了它只管交叉轴——水平对齐还得靠 justify-content 配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
