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）渲染。
立即学习“前端免费学习笔记（深入）”；
典型可运行示例
.center-box {
width: 200px;
height: 100px;
background-color: #4a90e2;
margin: 0 auto;
display: block;
}
对应 HTML：
<div class="center-box"></div>
注意：display: block 在 div 上其实是冗余的（div 默认就是 block），但写上更明确，尤其当这个类可能复用于 span 等元素时。
flex 替代方案更灵活，但别混淆场景
如果父容器用 display: flex + justify-content: center，也能居中——但它不依赖子元素宽度，也不需要 margin: auto。两者原理不同：
-
margin: auto是传统块流内的布局行为 - flex 居中是弹性盒子的对齐控制，子元素可以是任意
display类型
混用容易出问题：比如给 flex 子项再设 margin: auto，可能覆盖掉 justify-content 效果，或引发意外空白。
margin: 0 auto 依然最轻量、兼容性最好，但务必确认那两个硬性条件——宽度和 display 类型，漏掉任一个，就只是看起来“写了却没生效”。 
