margin: auto 水平居中需同时满足：元素为块级（display: block）且有明确宽度（如width: 200px）；否则无效，因浏览器无法计算剩余空间。
为什么 margin: auto 对某些元素无效
直接给一个 div 设置 margin: 0 auto 却没居中？大概率是因为它默认是 display: inline 或 display: inline-block。只有块级元素（display: block）在有明确宽度的前提下，margin: auto 才会水平居中。
常见踩坑点：
-
span、a、img（默认 inline）加了margin: auto完全没反应 - 父容器没设置
text-align: center，误以为这是居中的必要条件（其实不是） - 子元素用了
float或position: absolute，脱离文档流后margin: auto失效
必须同时满足的两个条件
让 margin: 0 auto 生效，缺一不可：
- 元素本身是块级显示：显式设置
display: block（或保持默认块级标签如div、p） - 元素有**明确宽度**：比如
width: 300px或width: 50%；width: auto不行
否则浏览器无法计算左右 margin 的“剩余空间”，只能按默认值（0）渲染。
立即学习“前端免费学习笔记（深入）”；
