flex-direction 仅决定主轴方向，垂直居中需配合 justify-content 和 align-items 使用；默认 row 下 align-items: center 垂直居中、justify-content: center 水平居中；父容器必须设 display: flex 且交叉轴有明确高度。
单靠 flex-direction 无法实现垂直居中——它只决定主轴方向（row 或 column），本身不负责对齐。真正起作用的是 justify-content 和 align-items，而它们的效果取决于 flex-direction 的取值。
flex-direction 是“方向开关”，不是“居中按钮”
很多人误以为设了 flex-direction: column 就自动垂直居中，其实它只是把主轴从水平变成垂直。此时：
-
justify-content: center才真正控制**垂直居中**（因为主轴已是 Y 轴） -
align-items: center反而控制**水平居中**（此时交叉轴是 X 轴）
默认 row 方向下更常用、更直观的写法
大多数场景下，保持 flex-direction: row（默认值）即可，配合：
-
align-items: center→ 控制**垂直居中**（交叉轴为 Y 轴） -
justify-content: center→ 控制**水平居中**（主轴为 X 轴）
这样逻辑清晰，不易混淆，也符合多数布局直觉。
必须满足的两个硬性前提
无论用哪种 flex 方向，以下两点缺一不可：
- 父容器声明
display: flex（或inline-flex） - 父容器在**交叉轴方向有明确高度**：比如
height: 100vh、min-height: 400px，或被其他方式撑开；若高度为auto且无内容，align-items: center就会“失效”——不是代码错，而是没空间可居中
别让子元素破坏 flex 居中效果
以下情况会让 flex 对齐“看起来没反应”：
- 子元素用了
position: absolute→ 脱离文档流，flex 属性对其无效 - 中间嵌套了未设高度的 flex 容器（如漏写
height: 100%）→ 高度链断裂 - 父容器是
inline-flex但未设置vertical-align→ 行内级容器可能因基线对齐产生偏移
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
