margin: auto在flex中能垂直居中，是因为在flex formatting context下被解释为“吞掉交叉轴剩余空间”；flex-direction: row时交叉轴为垂直方向，故margin-top/bottom: auto实现垂直居中，但需父容器设display: flex且有明确高度、子项未被stretch拉满。
margin: auto 在 flex 容器中为什么能垂直居中
因为 margin: auto 在 flex formatting context 下，被浏览器解释为「吞掉当前轴向上的所有剩余空间」，而垂直方向是否能居中，取决于它是否落在交叉轴上——不是“它想垂直居中”，而是“它恰好被分配到了垂直方向的空隙里”。
flex-direction: row 时 margin: auto 只影响上下外边距
默认 flex-direction: row，主轴水平、交叉轴垂直。此时 margin: auto 会同时设置 margin-top: auto 和 margin-bottom: auto，主动吸走交叉轴（Y 轴）上所有未被占据的空间，视觉上就是垂直居中。
-
margin-left和margin-right不会自动分配——它们在主轴上，auto在此处不触发空间吞并逻辑 - 若只想要垂直居中，
margin: auto单独就足够；若还要水平居中，必须额外加justify-content: center到父容器 - 如果子元素写了
flex: 1或align-self: stretch，它会拉满交叉轴，导致“无空可吞”，margin: auto静默失效
为什么写了 margin: auto 却垂直不动
最常见三个原因：
- 父容器没设
display: flex或display: inline-flex，margin: auto退化为普通块级行为，margin-top/bottom: auto直接算作0 - 容器在交叉轴（垂直方向）没有明确高度：比如只写
height: 100%但上级高度是auto，或漏了min-height: 100vh - 子元素被
align-self: stretch（默认值）拉满，填满整个交叉轴，没剩空间给margin: auto吞
flex-direction: column 时 margin: auto 的行为反转
一旦改成 flex-direction: column，主轴变垂直、交叉轴变水平，margin: auto 就只对左右生效：margin-left: auto 和 margin-right: auto 吞掉水平方向剩余空间，实现水平居中；上下外边距保持为 0。
这时候若还想垂直居中，得靠父容器的 align-items: center（注意：此时 align-items 控制的是水平方向，justify-content 才管垂直）——这个方向翻转是最容易被忽略的逻辑断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
