margin: 0 auto 仅对有明确宽度的块级元素生效；行内/行内块、浮动、绝对定位（未设 left/right 为 auto）、table-cell 元素均不适用；flex 容器中仅交叉轴方向有效。
margin: 0 auto 不生效？先看元素是不是块级且有明确宽度
它只对「块级元素」起作用，而且该元素必须有 width（或 max-width）值，不能是 auto 或未设置。行内元素（比如 <span></span>）、行内块（display: inline-block）默认不响应 margin: 0 auto 居中。
- 常见错误现象：
div写了margin: 0 auto却靠左贴边 —— 很可能没设width，或者被父容器的text-align: center干扰（后者只影响行内内容，不是真居中） - 使用场景：固定宽的导航栏、卡片容器、登录框等需要水平居中的块级布局
- 注意
float会破坏margin: 0 auto生效，浮动元素脱离文档流，不再受常规 margin 居中逻辑约束
flex 布局下 margin: 0 auto 失效？因为 flex-item 的 margin 行为变了
在 display: flex 容器里，子项的 margin: 0 auto 仍可工作，但仅限于「交叉轴方向」（即 align-items 控制的方向），主轴方向（justify-content 控制）会被 flex 对齐规则覆盖。换句话说：margin: 0 auto 在 flex 子项上，只在垂直方向（column）或水平方向（row）中「未被 justify-content 显式控制」时才有效。
- 典型陷阱：给 flex 容器设了
justify-content: flex-start，再给子项加margin: 0 auto想水平居中 —— 不会生效，因为主轴对齐已由容器接管 - 更可靠的做法：用
justify-content: center（水平）或align-items: center（垂直），而不是依赖 margin - 例外：如果 flex 容器是 column 方向，子项想水平居中，
margin: 0 auto是有效的（此时水平是交叉轴）
绝对定位元素 margin: 0 auto 无效？因为脱离文档流后 width 计算逻辑不同
给 position: absolute 元素设 margin: 0 auto，只有同时满足「左右偏移量都未设置（即 left 和 right 都是 auto）」且「有明确 width」时，才会触发浏览器按「块级居中」逻辑计算；否则它会退化成 left: 0 行为。
- 错误写法：
left: 20px; margin: 0 auto;—— 此时right不是 auto，浏览器忽略margin居中意图 - 正确写法（纯居中）：
left: 0; right: 0; margin: 0 auto;或更简洁地：left: 50%; transform: translateX(-50%); - 兼容性提醒：老版 IE（≤8）不支持
transform，但也不支持现代 flex，这种场景下只能靠left: 50%; margin-left: -半宽手动算
表格单元格（td/th）里 margin: 0 auto 失效？因为 table-cell 忽略块级 margin
display: table-cell（包括原生 <td>）天生不响应 <code>margin，这是 CSS 规范行为。哪怕你强行设 margin: 0 auto，浏览器也会直接忽略。
立即学习“前端免费学习笔记（深入）”；
- 替代方案：在
td里嵌一层div，给这个div设width+margin: 0 auto；或者把td改成display: block（但会破坏表格语义和结构） - 性能提示：滥用
table-cell实现居中（比如为了兼容老浏览器）不如直接上flex，现代项目中几乎没必要迁就这种写法 - 检查技巧：用浏览器开发者工具看 computed styles，如果
margin-left/margin-right显示为0px且不可编辑，基本就是 display 类型导致的硬性限制
最常被忽略的一点：margin 居中本质依赖「浏览器对 width 和 display 的推断逻辑」，一旦其中任一环节被其他 CSS（比如 float、position、display 变更）干扰，整个链条就断了。调试时优先查 computed width 和 display 值，比反复改 margin 更快定位问题。
