margin: auto 垂直居中需满足特定条件：绝对定位时须四边为0且宽高固定；Flex布局中依赖交叉轴剩余空间及父容器显式高度；常规文档流中因无垂直剩余空间而失效。
因为块级元素在常规文档流中垂直方向没有“剩余空间”可分配，margin: auto 在 margin-top 和 margin-bottom 上的计算结果恒为 0。
为什么水平能居中，垂直就不行？
浏览器对水平和垂直方向的 margin 分配逻辑完全不同：
- 水平方向有明确父容器宽度作为基准，子元素设了固定
width后，左右自然产生“剩余空间”，margin: 0 auto就能均分 - 垂直方向上，块级元素默认
height: auto，高度由内容撑开，父容器若没设height或min-height，子元素真实高度可能为 0 —— 浏览器根本不知道“上下还剩多少像素” -
margin: auto不是居中开关，它是空间分配器；没空间，就无从分配
absolute + margin:auto 垂直居中必须四边全为 0
只有当元素脱离文档流、且浏览器能明确算出上下可用空间时，margin: auto 才会在垂直方向生效。这要求同时满足：
- 父容器设
position: relative（否则定位基准错乱） - 子元素设
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只影响上下（Y 轴），实现垂直居中；水平方向需靠justify-content: center - 若子元素被
flex-grow: 1或align-items: stretch撑满交叉轴，就无剩余空间可吞，margin: auto失效 - 父容器必须有明确高度（如
height: 400px或min-height: 100vh），否则“剩余空间”为 0
真正容易被忽略的点是：所有方案都依赖一个“看不见的锚点”——要么是父容器的 position: relative，要么是 display: flex 的显式高度，要么是绝对定位所需的四边归零。缺了它，margin: auto 就只是四个字，不是居中指令。
