为什么CSS的margin:auto无法让块级元素水平居中？

margin: auto水平居中失效的根本原因是元素未设显式width或脱离常规块级流；必须确保元素为块级、width小于父容器、未浮动/绝对定位、父容器无flex/grid干扰，且布局上下文完整。

因为元素没设宽度，或者它根本不在常规块级流里。

元素没写 width，margin: auto 就算不出来左右空多少

块级元素默认 width: auto，也就是占满父容器整行——没有“剩余空间”，浏览器算出的 margin-left 和 margin-right 都是 0。

1. 必须显式写 width：比如 width: 400px、width: 80%，不能是 width: 100%（和父容器一样宽，也没剩余额外空间）
2. max-width 单独写没用，得配合 width 或让内容实际撑不开它
3. 检查 computed style，确认元素真实 width 值是否大于 0 且小于父容器宽度

元素被 float、position: absolute 或父容器是 flex/grid，就脱离了块级流

margin: auto 只在常规块级格式化上下文（BFC）中按老规则生效。一旦脱离，它要么被忽略，要么行为完全变样。

1. float: left 或 float: right → 直接无视 margin: auto
2. position: absolute → 除非同时满足 top: 0; bottom: 0; left: 0; right: 0 且宽高固定，否则不参与水平居中计算
3. 父容器用了 display: flex → 子元素变成 flex item，margin: 0 auto 不会水平居中，反而可能把元素推到垂直方向中心
4. 父容器用了 display: grid → 同样接管布局逻辑，margin: auto 失去传统含义

你以为居中了，其实是 text-align: center 在起作用

很多看起来“居中”的 inline-block 元素，真正生效的是父容器的 text-align: center，而不是子元素的 margin: 0 auto。

1. display: inline-block 元素加 margin: 0 auto 无效，因为它的 margin 不触发块级居中逻辑
2. 正确做法：父容器设 text-align: center，子元素设 display: inline-block + 显式 width
3. 如果父子都写了居中相关样式，删掉子元素的 margin，只留 text-align 来验证到底谁在干活

父容器本身没提供稳定的空间锚点

即使子元素宽高和定位都对，父容器若没给明确的布局上下文，margin: auto 仍可能失效。

1. 父容器 overflow: hidden 且高度为 0 或由内容撑开 → 子元素渲染区域不可见，或高度塌陷导致“无空间可居中”
2. 父容器有 padding 或 border，但子元素 width 没减去这些值 → 实际溢出，浏览器可能强制重排
3. 父容器没设 position: relative，而子元素用了 position: absolute + margin: auto → 定位基准错乱，居中飘到视口

真正难的不是写对那几行 CSS，而是确认那个“看不见的依赖”：元素是否真正在常规流里、宽度是否被浏览器识别为可分配、父容器是否提供了稳定的空间锚点。