margin: auto 垂直居中仅在特定条件下生效：绝对定位需四边为0且宽高固定；Flex容器中依赖交叉轴剩余空间；transform方案更通用可靠。
因为块级元素在常规文档流中垂直方向没有“剩余空间”可分配，margin-top: auto 和 margin-bottom: auto 的计算结果恒为 0。
普通块级流里 margin: auto 垂直部分直接被忽略
浏览器对水平和垂直方向的 margin 分配逻辑完全不同：
- 水平方向有父容器宽度作为明确基准，
margin: 0 auto能算出左右剩余空间并均分 - 垂直方向上，块级元素默认
height: auto，高度由内容撑开，父容器若没设height或min-height，子元素实际高度可能为 0，根本不存在“上下还剩多少像素”这个概念 -
margin: auto写成单值（如margin: auto）会被解析为margin: auto auto auto auto，垂直部分仍无效 - 哪怕父容器有高度，只要子元素
height是auto，垂直居中逻辑就不会触发
absolute + margin: auto 垂直居中必须四边全为 0
只有当元素脱离文档流、且浏览器能明确算出上下可用空间时，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 不是传统意义上的“自动算边距”，而是被解释为“吞掉交叉轴上的全部剩余空间”。它依赖容器主动计算空隙，而非元素自身尺寸推导：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
display: flex且有明确高度（如height: 400px或min-height: 100vh） - 子元素不能被
flex-grow: 1或align-self: stretch拉满交叉轴，否则无剩余空间可吞 -
flex-direction: row（默认）时，margin-top: auto和margin-bottom: auto实现垂直居中；flex-direction: column时则管水平方向 -
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%就会以视口为基准，而不是你期望的父容器
复杂点往往藏在看似无关的地方：比如父容器忘了加 position: relative，或者 flex 容器的高度因内容塌陷而为 0。这些细节一旦漏掉，所有 margin: auto 的尝试都会静默失效。
