margin: 0 auto 实现水平居中需同时满足：块级元素、显式设置宽度、未脱离文档流；失效主因是上下文不匹配，如无宽、浮动或绝对定位。
margin: 0 auto 能实现子元素水平居中，但仅当它同时满足三个硬性条件：元素是块级（display: block 或默认块行为）、宽度不为 auto、且未脱离标准文档流（即不能有 float、position: absolute/fixed）。
为什么 margin: 0 auto 常常失效？
失效不是语法错，而是上下文不匹配。最常见的情况是：
- 子元素没设
width（或max-width），浏览器按width: auto渲染，此时左右 margin 自动归零 - 子元素被设了
float: left或float: right—— 浮动元素的margin: auto完全被忽略 - 子元素用了
position: absolute，它已脱离文档流，margin: auto失去计算基准 - 父元素没撑开宽度（比如只有内联内容、或
width: fit-content但内容太短），视觉上“看不出居中”
margin: 0 auto 的正确写法与典型场景
适用于明确宽高的容器类元素，例如卡片、表单框、固定尺寸的模块：
.card {
width: 320px; /* 必须显式设置 */
margin: 0 auto; /* 上下为 0，左右自动均分 */
background: #fff;
}
<p>/<em> HTML 中直接用 </em>/
</p><div class="card">内容</div>
注意：margin: 0 auto 是简写，等价于 margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto。它只控制水平方向，垂直方向无影响。
和 text-align: center 混用时的坑
有人会把 text-align: center 加在子元素上试图“自己居中”，这是无效的：
-
text-align作用对象是**子元素的内容**，不是元素自身位置 - 正确做法是：给父元素设
text-align: center，再让子元素变成display: inline-block（或inline） - 若子元素已是
block且你又加了text-align: center，只会让里面的文字居中，盒子本身纹丝不动
兼容性与现代替代建议
margin: 0 auto 兼容所有浏览器（包括 IE6+），但它依赖固定宽度，在响应式场景中容易僵硬。实际项目中更推荐：
- 宽高未知时：用
display: flex+justify-content: center（父元素上） - 需兼顾垂直居中：同上，再加
align-items: center - 父容器已是
grid：直接写place-items: center，一行搞定
真正难的不是写哪行代码，而是判断当前元素是否还在文档流里、有没有被 float 或 position 暗中“劫持”——检查 computed styles 里的 display 和 position 值，比反复试 margin 更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
