margin: auto 在普通块级流中垂直方向恒为 0；因块级元素高度由内容撑开，无可用剩余空间分配，故上下 margin 计算结果始终为 0。
margin: auto 在普通块级流中垂直方向恒为 0
浏览器对块级元素的垂直空间分配逻辑，和水平方向完全不同。水平方向有父容器宽度作为基准，margin: 0 auto 能算出左右剩余空间并均分；但垂直方向上，块级元素默认 height: auto，高度由内容撑开，没有“可用剩余空间”供上下 margin 分配，所以 margin-top 和 margin-bottom 的计算结果始终是 0。
常见错误现象包括：
-
margin: auto写成单值，被解析为margin: auto auto auto auto，垂直部分仍无效 -
margin: auto 0看似想让上下居中、左右贴边，实际等价于margin: auto 0 auto 0，上下 margin 全退化为 0 - 父容器没设
height或min-height，子元素又没内容，真实高度为 0，更无从居中
absolute + margin: auto 垂直居中必须四边全为 0
只有当元素脱离文档流，并且浏览器能明确算出“上下可用空间”时，margin: auto 才会在垂直方向起作用。这要求同时满足：
- 父容器有
position: relative（或非static值），否则定位基准错乱 - 子元素设
position: absolute，且top: 0、bottom: 0、left: 0、right: 0全部写齐 - 子元素宽高必须是具体值（如
width: 200px，不能是auto或fit-content）
漏掉任意一项，比如只写 top: 0; left: 0; margin: auto，元素就会卡在左上角——不是 bug，是规范行为。
Flex 容器里 margin: auto 只在交叉轴生效
在 display: flex 容器中，margin: auto 的作用机制变了：它只吞掉**交叉轴**上的剩余空间，不处理主轴。这意味着：
- 默认
flex-direction: row时，margin: auto只影响上下（Y 轴），实现垂直居中；水平方向不会动 - 若要水平也居中，得在容器上加
justify-content: center，而不是指望子元素的margin - 写成
flex-direction: column时，margin: auto就只管左右（X 轴），垂直方向照样无效
别把它当成“通用居中开关”，它本质是交叉轴空间回收器。
真正该优先用的方案：transform + top/left 50%
比起反复调试 margin: auto 的各种约束，top: 50%; left: 50%; transform: translate(-50%, -50%) 更简单可靠：
- 不要求子元素宽高固定，文字换行、图片加载后撑开都 OK
- 不依赖父容器是否设了
height，也不怕overflow: hidden裁剪 - 唯一硬性要求是父容器有
position: relative——这个容易漏，但一旦漏了，整个定位就飘到视口中心去
复杂点不在语法，而在于那个看似可选的 position: relative，它是整条定位链的锚点，不是装饰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
