块级元素垂直方向margin: auto无效，因高度由内容撑开且父容器无明确高度；absolute定位需同时满足四条件才生效；flex中margin: auto吞剩余空间；transform+top/left 50%更通用可靠。
因为块级元素在常规文档流中垂直方向没有“剩余空间”可分配，margin: auto 在 margin-top 和 margin-bottom 上的计算结果恒为 0。
块级元素的垂直空间不可计算
浏览器对水平和垂直方向的 margin 分配逻辑完全不同：水平方向有父容器宽度作为明确基准，margin: 0 auto 能算出左右剩余空间并均分；但垂直方向上，块级元素默认 height: auto，高度由内容撑开，父容器若没设 height 或 min-height，子元素实际高度可能为 0，根本不存在“上下还剩多少像素”这个概念。
- 父容器未设
height或min-height→ 子元素高度不可知，margin-top: auto直接退化为 0 - 子元素
height是auto→ 垂直方向无固定尺寸，margin: auto不触发居中逻辑 -
margin: auto写成单值（如margin: auto）→ 解析为margin: auto auto auto 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 不是传统意义上的“自动算边距”，而是被解释为“吞掉交叉轴上的全部剩余空间”。它依赖容器主动计算空隙，而非元素自身尺寸推导。
- 父容器必须设
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—— 这个看似可选，实则是整个定位链的锚点，漏了就会飘到视口中心
真正容易被忽略的，不是写法本身，而是那个必须显式声明的 position: relative。它不是装饰，是定位生效的前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
