margin: 0 auto 居中生效需同时满足块级元素和显式宽度两个前提，缺一则失效；行内元素、无宽块元素、flex/grid容器子项、浮动或绝对定位元素均不支持。
元素没设宽度或设了 width: 100%
浏览器计算 margin: 0 auto 的前提是：左右 margin 能“分到空间”。如果元素宽度是 width: auto（默认）或 width: 100%，它就占满父容器，左右无剩余空间可分，auto 只能取 0。
常见误写：.box { margin: 0 auto; } —— 缺少宽度声明，等于白写。
- 必须显式加宽度，比如
width: 600px、max-width: 800px或width: 80% -
width: 100%和不写宽度效果一样，都会让居中失效 - 响应式推荐组合：
width: 100%; max-width: 800px; margin: 0 auto;，窄屏铺满，宽屏居中
元素不是块级，或被改成了 inline/inline-block
margin: 0 auto 只对块级、非浮动、非绝对定位的常规流元素生效。<span></span>、<img alt="HTML元素左右居中margin为什么不起作用？原因与解决办法" > 默认是行内级，display: inline-block 也不支持 auto margin——因为它的盒模型不参与“总宽度 = margin + border + padding + width”这一分配逻辑。
- 检查是否意外写了
display: inline或display: inline-block，需改为display: block（<div> 默认就是，但若从其他标签改来，必须补上） <li>对 <code><img alt="HTML元素左右居中margin为什么不起作用？原因与解决办法" >或文字这类行内内容，别给它加margin: 0 auto，而是给它的父容器加text-align: center - 表格
<table> 若加了 <code>align="center"或display: inline-table，也会退化为行内级，同样失效父容器用了 flex/grid，或子元素脱离了文档流
一旦父元素设了
display: flex或display: grid，子元素就变成 flex item / grid item，不再走常规块级流，margin: 0 auto的自动分配逻辑被忽略。同理，float、position: absolute、position: fixed都会让元素脱离块级格式化上下文，automargin 失效。立即学习“前端免费学习笔记（深入）”；
- 绝对定位元素想居中？不能靠
margin: 0 auto，得用left: 50%; transform: translateX(-50%)或left: 0; right: 0; margin: 0 auto;（仅当同时设position: absolute和width时，left/right: 0才能让margin: 0 auto在绝对定位上下文中重新起效） - flex 容器里想水平居中子项，直接用
justify-content: center，别在子项上硬套margin: 0 auto - 别在
<td> 上试 <code>margin: 0 auto——它的 display 是table-cell，不支持外边距父容器有 text-align: center 干扰判断
text-align: center只影响行内内容（文字、<img alt="HTML元素左右居中margin为什么不起作用？原因与解决办法" >等），对块级子元素的margin: 0 auto完全无效。但它容易造成“看起来居中了”的错觉，让人误以为margin生效了，实际起作用的是text-align对内部行内内容的控制。- 如果父容器加了
text-align: center，而你又给子<div> 加了 <code>margin: 0 auto，两者效果叠加，很难分辨真正起作用的是哪个 - 调试时建议先清空父容器所有样式，只保留
width和margin: 0 auto，再逐步加回其他规则 - 特别注意：表格单元格里的文字居中，要写在
<td> 或 <code><th> 上，而不是 <code><table> 标签上 真正卡住人的地方，往往不是忘了写 <code>margin: 0 auto，而是没意识到它背后那两个硬性前提：块级 + 明确宽度——缺一不可。哪怕只漏掉一个width声明，浏览器就按规范默默当它不存在。
- 如果父容器加了
- 绝对定位元素想居中？不能靠
