flex-direction 不负责垂直居中，它仅决定主轴方向（row/column）；垂直居中由 align-items（交叉轴）或 justify-content（主轴）实现，取决于主轴朝向。
flex-direction 不负责垂直居中，别被名字误导
很多人看到 flex-direction 就以为它能控制对齐方向，其实它只决定主轴走向（row 或 column），和“内容在容器里怎么居中”完全无关。真正管垂直居中的，是 align-items（交叉轴对齐）或 justify-content（主轴对齐），取决于你把哪根轴设成垂直方向。
卡片内单行文本垂直居中：用 align-items + flex-direction: column
适用场景：卡片高度固定，里面只有一段文字或一个图标+文字组合，希望整体在卡片里上下居中。
-
display: flex是前提，没它啥都白搭 - 设
flex-direction: column后，主轴变垂直，此时justify-content: center才能让内容在垂直方向居中 - 更稳妥写法是同时加
align-items: center，避免文字左右偏移 - 如果卡片用了
padding，记得确认是否影响视觉居中——浏览器计算的是 content box，不是 padding 区域
div.card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 200px;
}
卡片内多行/不规则内容垂直居中：别硬套 flex-direction
当卡片里有标题、描述、按钮堆叠，且高度不固定时，flex-direction: column + justify-content: center 容易让顶部留白过大，尤其在内容少的时候。
- 优先考虑
flex-direction: row（默认值），然后用align-items: center—— 这样交叉轴才是垂直方向，对齐更自然 - 如果内容本身是块级元素堆叠，加
margin: auto到最外层子元素也能触发居中（但兼容性略弱于 flex） - IE11 对
align-items: center在 min-height 容器里的表现不稳定，遇到得加height: 100%或改用display: table-cell - 别忘了给父容器设明确高度，否则 flex 居中没参照物，
height: 100%要求祖先链上所有父级都有高度定义
为什么 flex-direction: column 容易出错
错误现象：flex-direction: column 后内容贴顶、居中失效、滚动条意外出现。
- 常见原因是没设容器高度，或者高度被内容撑开，
justify-content: center失去作用范围 - 当子元素用了
margin-bottom，flex 容器会把它算进总高度，导致视觉偏下 -
flex-direction: column下，align-self默认按父容器宽度对齐，若子元素宽度不足，align-items: center会让它缩到中间，但文字可能换行错乱 - 移动端 Safari 对
min-height+flex-direction: column+justify-content: center的组合偶有渲染延迟，可加transform: translateZ(0)强制 GPU 加速
真正要记住的就一点：垂直居中靠的是「哪根轴是交叉轴」+「用 align-items 还是 justify-content」，而不是 flex-direction 本身。方向只是铺路，对齐才是干活的人。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
