margin: auto 在普通块级流中垂直方向恒为0，因规范未定义其垂直行为；仅在绝对定位四边全约束或Flex容器交叉轴中有居中效果。
margin: auto 在普通块级流中垂直方向计算结果恒为 0，不是浏览器“没实现”，而是规范上根本没定义这个行为——它压根不参与垂直空间分配。
块级元素在垂直方向没有“剩余空间”可分
水平方向能居中，是因为块级元素默认占满父容器宽度（width: 100%），设了固定 width 后，左右自然有明确剩余空间；但垂直方向上，块级元素高度由内容撑开，height: auto 意味着“无基准、无上限”，浏览器连“从哪减、减多少”都算不出来，margin-top 和 margin-bottom 只能回退到初始值 0。
- 父容器没设
height或min-height→ 子元素真实高度可能为0 - 子元素
height是auto→ 垂直方向无固定尺寸，margin: auto被忽略 - 写了
margin: auto单值 → 解析为margin: auto auto auto auto，垂直部分仍无效 - 写了
margin: auto 0→ 等价于margin: auto 0 auto 0，上下 margin 全退化为0
absolute + margin:auto 垂直居中只在四边全约束时生效
这不是 margin: auto “变强了”，而是它被用在了一个脱离文档流、边界明确的上下文中：浏览器把 top: 0; bottom: 0; left: 0; right: 0 围出来的区域当作“可用余量”，再均分给 margin。
- 父容器必须有
position: relative（或其他非static值），否则定位基准错乱 - 子元素必须同时声明
top、bottom、left、right且都为0，缺一个，垂直 margin 就不参与计算 -
width和height必须是具体值（如200px），不能是auto或fit-content - 只写
top: 0; left: 0; margin: auto→ 元素卡左上角，不是 bug，是规范行为
Flex 容器里 margin:auto 的作用轴取决于 flex-direction
在 display: flex 中，margin: auto 不再是传统块流里的“均分剩余空间”，而是 Flex 引擎对“交叉轴剩余空间”的回收指令。
立即学习“前端免费学习笔记（深入）”；
-
flex-direction: row（默认）→margin: auto吸走交叉轴（Y 轴）剩余空间，实现垂直居中 -
flex-direction: column→ 主轴变 Y 轴，margin: auto改吸 X 轴，垂直方向失效 - 子元素设了
flex-grow: 1→ 先占满空间，margin: auto没剩余可吞 - 父容器
align-items: stretch（默认）且子元素没设高 → 子项被拉伸填满，margin: auto失效
真正简单可靠的方案是 transform + top/left 50%
比起反复调试 margin: auto 的各种约束，top: 50%; left: 50%; transform: translate(-50%, -50%) 更少依赖条件：
- 不要求子元素宽高固定，文字换行、图片加载后撑开都 OK
- 不依赖父容器是否设了
height，也不怕overflow: hidden裁剪 - 唯一硬性要求是父容器有
position: relative——这个容易漏，但一旦漏了，整个定位就飘到视口中心去
复杂点不在语法本身，而在于那个看似可选的 position: relative ——它不是装饰，是定位锚点的必要前提。
