根本原因是元素未处于常规文档流或宽度不可分配：块级元素默认width: auto占满父容器，无左右剩余空间；脱离流（如float、absolute）、父容器无定位锚点或子元素宽高不明确，均导致margin: auto无法进入居中计算路径。
根本原因不是 margin: auto 写错了，而是它根本没进入“可居中”的计算路径——浏览器压根没给它分配左右空间的机会。
元素没设 width 或 width 不够“确定”
块级元素默认 width: auto，即占满父容器整行，左右无剩余空间，margin: auto 算出来就是 0。
- 必须显式写
width：比如width: 300px、width: 80%、width: fit-content（但注意 IE 不支持） -
width: 100%不行——它等于父宽，没剩余额外空间可分 -
max-width单独用也不行，得配合width或让内容实际宽度小于父容器（例如文字换行后变窄） - 用
box-sizing: border-box避免padding和border撑破计算宽度
元素脱离了常规文档流
margin: auto 只在标准块级流中按老规则工作；一旦脱离，它的行为就变了甚至失效。
-
float: left或float: right→ 直接忽略margin: auto -
position: absolute→ 除非同时满足top: 0; right: 0; bottom: 0; left: 0+ 显式width/height，否则不生效 -
display: flex或display: grid父容器 → 子元素的margin: auto会变成交叉轴对齐控制，不是传统居中逻辑 -
display: inline-block元素加margin: 0 auto无效，它不触发块级居中机制
父容器“没提供锚点”或“空间不可见”
即使子元素条件都对，父容器若没撑开稳定空间，margin: auto 依然无从下手。
- 父容器
height: 0或高度塌陷（比如只含浮动子项且没清除），子元素就算有高度也“无处可居中” - 父容器
overflow: hidden且自身没设height/min-height，可能导致子元素渲染区域被裁掉 - 父容器没设
position: relative，而子元素用了position: absolute+margin: auto→ 定位基准错乱，居中飘到视口 - 父容器有
padding或border，但子元素width没减去这些值 → 实际溢出，浏览器可能强制重排
你以为居中了，其实是 text-align 在起作用
很多看起来“居中了”的场景，真正生效的是 text-align: center，而不是子元素的 margin: 0 auto。
-
text-align: center作用于父容器，影响的是其内部**行内级内容**（如文字、img、span） - 给一个
div设text-align: center，里面放个没设宽的img，看起来居中了——其实是img作为替换元素被当作了行内内容处理 - 如果父容器同时写了
text-align: center和子元素写了margin: 0 auto，你无法判断哪个在起作用；建议删掉margin，只留text-align来验证 -
text-align对纯块级子元素（如另一个div）完全无效，除非它被设为display: inline-block
最常被忽略的细节是：它不依赖视觉表现，而依赖浏览器是否识别出“可分配的左右空间”。这个空间是否存在，由元素显示类型、宽高声明、父容器布局上下文三者共同决定——缺一不可。一旦其中任一环节断裂，margin: auto 就安静地退回到 0，连报错都不会有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
