Flex垂直居中核心是align-items与flex-direction配合：默认row时align-items: center实现垂直居中；column时需justify-content: center；通用写法为justify-content: center + align-items: center。
用 Flex 布局实现垂直居中，核心在于理解 flex-direction 和 align-items 的配合逻辑。当容器设为 display: flex 后，align-items 控制的是“交叉轴”上的对齐方式，而交叉轴的方向由 flex-direction 决定——所以改变主轴方向，会直接改变 align-items 的作用方向。
默认主轴水平（flex-direction: row）→ align-items 控制垂直居中
这是最常用的方式：主轴为水平方向（从左到右），交叉轴就是垂直方向，此时 align-items: center 即让子项在垂直方向居中。
- 容器需设置：
display: flex; align-items: center; - 无需指定
flex-direction（默认就是row） - 高度要有明确值（如
height: 300px或min-height: 100vh），否则容器高度塌缩，居中不可见
主轴垂直（flex-direction: column）→ align-items 控制水平居中
若把主轴设为垂直方向（从上到下），交叉轴就变成水平方向，这时 align-items: center 实际起的是“水平居中”作用；要实现垂直居中，就得靠 justify-content: center（它控制主轴对齐）。
- 容器需设置：
display: flex; flex-direction: column; justify-content: center; -
align-items: center可额外加上，用于同时水平居中 - 同样需要容器有明确高度，否则无效果
单个子元素 + align-items + justify-content 组合（推荐通用写法）
不管主轴方向如何，只要同时设置 justify-content: center 和 align-items: center，就能在两个方向都居中。这是最直观、容错性高的写法。
立即学习“前端免费学习笔记（深入）”；
- 适用于
flex-direction: row（默认）或column - 代码简洁：
display: flex; justify-content: center; align-items: center; - 适合居中图标、按钮、登录框等固定尺寸或弹性内容
注意：align-items 不作用于多行 flex 容器的“行间”对齐
如果子项换行（flex-wrap: wrap），align-items 仍只控制每行内子项在交叉轴上的对齐，不能让多行整体在容器中垂直居中。此时应改用 align-content: center（针对多行之间的交叉轴分布）。
- 多行垂直居中需：
display: flex; flex-wrap: wrap; align-content: center; height: 400px; -
align-items和align-content不同，别混淆
