margin: 0 auto 仅对定宽块级元素生效；失效常见于无宽度、inline/flex布局、父容器塌陷或absolute定位未配left/right。
margin: 0 auto 为什么有时候不生效
它只对「有明确宽度」且「是块级元素（或被 display: block 触发）」的盒子起作用。常见失效场景：盒子没设 width、用了 display: inline 或 display: flex、父容器没撑开、或者盒子本身是 position: absolute 且没配 left/right。
- 检查是否漏写了
width（哪怕写成width: fit-content也不行，必须是具体值或百分比） - 确认元素不是
inline级别——span、a这类默认内联标签要加display: block或display: inline-block - 如果父容器是
display: flex，margin: 0 auto会被 flex 布局接管，此时无效 -
position: absolute元素需配合left: 0; right: 0;才能让margin: 0 auto生效
定宽盒子用 margin: 0 auto 的标准写法
核心就三步：设宽、块级、居中。不需要额外 hack，也不依赖 JS。
- 给盒子加固定宽度，比如
width: 300px或width: 50% - 确保它是块级上下文，例如：
display: block（div 默认就是） - 写
margin: 0 auto—— 上下外边距为 0，左右自动分配剩余空间
示例：
div {
width: 200px;
margin: 0 auto;
}
和 flex / text-align 混用时的冲突点
很多人在父容器上同时用 text-align: center 和子元素 margin: 0 auto，其实没必要，还容易误判原因。更麻烦的是和 display: flex 并存。
-
text-align: center只对 inline / inline-block 子元素有效，对 block 子元素无效 - 父容器设了
display: flex，子元素的margin: 0 auto会变成“在主轴方向居中”，但前提是主轴是水平的（flex-direction: row），且没有其他justify-content覆盖 - 一旦父容器用了
justify-content: center，子元素自己的margin: 0 auto就完全没用了
IE8–IE9 下 margin: 0 auto 失效的兼容处理
老 IE 对 margin: 0 auto 支持没问题，但有个隐藏前提：文档必须有正确 doctype，否则会触发 quirks mode，导致居中失效。
- 确保 HTML 开头是标准声明：
- 避免在 body 前插入注释或空格（某些 IE 版本下会破坏盒模型解析）
- 如果仍不行，可临时加
text-align: center在父容器，再在子元素上重置text-align: left（仅限内容为文字的场景）
真正难搞的不是这个属性本身，而是它依赖的上下文太容易被悄悄改掉——比如某个 CSS reset 把 div 的 display 改成了 inline，或者一个无心的 float 让父容器塌陷了。查问题时优先盯住这些地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
