margin: auto在flex中是“吞空指令”而非居中指令，它吞掉交叉轴剩余空间实现视觉居中；失效主因是父容器未设display:flex、交叉轴无明确高度或子项被stretch拉满。
margin: auto 在 flex 容器中不是“居中指令”，而是“吞空指令”
它根本不会主动对齐，只是在 flex formatting context 下被浏览器解释为「把当前轴向上的所有剩余空间全部吃掉」。视觉上看起来居中，是因为空隙被均分后，元素自然停在中间——前提是容器有明确尺寸、子项没把空隙填满。
为什么写了 margin: auto 却只水平居中、垂直不动？
最常见三个原因：
-
display: flex没写在父容器上，margin: auto退化为普通块级行为，margin-top/margin-bottom直接算作 0 - 父容器在交叉轴（垂直方向）没有可计算的高度：比如只写
height: 100%但上级是height: auto，或漏了min-height: 100vh - 子元素被
align-self: stretch（默认值）拉满交叉轴，没剩空间可吞——此时margin: auto静默失效
flex-direction 改变时，margin: auto 的生效方向会翻转
它不看 CSS 写法顺序，只认 flex 坐标系：
- 当
flex-direction: row（默认）时：margin-top: auto和margin-bottom: auto吞垂直方向剩余空间 → 视觉垂直居中 - 当
flex-direction: column时：margin-top: auto和margin-bottom: auto吞的是水平方向剩余空间 → 实际效果是水平居中；此时想垂直居中，得靠justify-content: center（注意：这里justify-content管的是垂直轴）
哪些情况会让 margin: auto 彻底静默退出？
它只对“未被弹性属性接管尺寸”的直系子项起作用：
- 子元素写了
flex: 1、flex-grow: 1或align-self: stretch，尺寸被弹性系统接管，margin: auto不再参与空间分配 - 子元素脱离文档流：
position: absolute、float、display: contents - 目标元素不是 flex 容器的**直系子元素**（中间隔了 wrapper）
- 父容器设了
justify-content: space-between等全局对齐，会覆盖单个元素的margin-left: auto
真正容易被忽略的是：它不依赖子元素宽高是否固定，但必须确保容器在对应轴向上有明确尺寸——不是“内容撑开”，而是“浏览器能算出空隙有多大”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
