margin: auto 垂直居中需四条件：父容器 position: relative、子元素 position: absolute 且 top/bottom/left/right 全设、宽高为具体值；Flex 中 margin:auto 仅吞交叉轴剩余空间；transform 方案更通用可靠。
因为 margin: auto 在常规文档流中对 margin-top 和 margin-bottom 的计算结果恒为 0，浏览器根本不会去“分配”垂直方向的剩余空间。
块级元素垂直方向没有“剩余空间”可算
水平方向有父容器明确宽度作基准，margin: 0 auto 才能均分左右空隙；但垂直方向上，块级元素默认 height: auto，高度由内容撑开，父容器若没设 height 或 min-height，子元素实际高度可能为 0 —— 浏览器连“上下还剩多少像素”都无从得知，自然不触发垂直 margin 计算。
-
margin: auto写成单值，会被解析为margin: auto auto auto auto，垂直部分仍退化为 0 -
margin: auto 0看似想垂直居中、水平贴边，实际等价于margin: auto 0 auto 0，上下 margin 全是 0 - 父容器未设
position: relative，后续用absolute+margin: auto会定位到视口而非容器内
absolute + margin:auto 垂直居中必须四条件全满足
只有当元素脱离文档流、且浏览器能明确推导出上下可用空间时，margin: auto 才会在垂直方向生效。这四个条件缺一不可：
- 父容器必须设
position: relative（或非static值） - 子元素设
position: absolute，且top: 0、bottom: 0、left: 0、right: 0全部写齐 - 子元素
width和height必须是具体值（如200px），不能是auto、fit-content或依赖内容的百分比 - 漏掉任意一项（比如只写
top: 0; left: 0;），元素就会卡在左上角，不是 bug，是规范行为
Flex 容器里 margin:auto 不是“自动居中”，而是“吞交叉轴剩余空间”
在 display: flex 容器中，margin: auto 的作用机制完全不同：它只在交叉轴方向吞掉全部剩余空间，和主轴无关。
- 默认
flex-direction: row时，margin: auto只影响margin-top/margin-bottom，实现垂直居中；水平方向不动 - 若想水平也居中，得在容器上加
justify-content: center，而不是指望子元素的margin - 子元素若被
flex-grow: 1或align-self: stretch拉满交叉轴，就没了“剩余空间”，margin: auto直接失效 -
justify-content会覆盖margin-left: auto等行为，例如设了justify-content: space-between，末项的margin-right: auto就不会起作用
更通用可靠的方案：transform + top/left 50%
比起反复调试 margin: auto 的各种约束，top: 50%; left: 50%; transform: translate(-50%, -50%) 更简单可靠：
- 不要求子元素宽高固定，文字换行、图片加载后撑开都 OK
- 不依赖父容器是否设了
height，也不怕overflow: hidden裁剪 - 唯一硬性要求是父容器有
position: relative——这个最容易漏，一旦漏了，top: 50%就会以视口为基准，整个元素飘到屏幕中央
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
