margin: auto 居中失效的根本原因是元素未设宽度或非块级元素；必须同时满足：块级元素、明确宽度、margin: 0 auto。flex 布局下行为不同，text-align: center 不影响块级元素自身居中。
margin: auto 居中为什么经常没反应
根本原因就两个：元素没设 width，或者它根本不是块级元素。浏览器看到 margin: auto 会先检查“左右有没有空间可分”——如果元素宽度是 auto（默认值），它就占满父容器，剩余空间为 0，margin: auto 只能分配 0px，自然不动。
常见错误现象：
-
div加了margin: 0 auto还是贴左 - 用
span或img写margin: 0 auto完全无效 - 父容器用了
display: flex，子元素加margin: 0 auto没变化（此时它已不是块级流）
必须同时满足的三个条件
缺一不可，顺序不重要，但每条都得写上：
- 目标元素是块级：
display: block（div默认就是，但如果从span改来，必须显式加） - 设置明确宽度：
width: 400px、width: 80%、max-width: 600px都行；width: auto或不写 = 不生效 - 写
margin: 0 auto（等价于margin-left: auto; margin-right: auto）
示例：
.box {
width: 500px;
margin: 0 auto;
background: #eee;
}
flex 布局下 margin: auto 的行为完全不同
在 display: flex 父容器里，margin: auto 不再是“均分左右”，而是“吃掉主轴和交叉轴所有剩余空间”。所以单个子项设 margin: auto 会水平+垂直居中，但前提是：
- 父容器必须是
display: flex - 子项不能被
flex-grow: 1撑满 - 子项不能被
align-self: stretch拉伸（默认可能触发） - 多个子项时，只对某一个设
margin-left: auto才会把它“推到末尾”，不是居中
所以别混用：想用传统块级居中，就别把父容器设成 flex；想用 flex 居中，就直接用 justify-content + align-items，或单子项配 margin: auto。
text-align: center 是常见干扰项
很多人误以为 text-align: center 能让 div 自身居中——它只影响内部的行内内容（文字、img、span），对块级盒子本身毫无作用。如果你发现加了 text-align: center 后盒子没动，不是它错了，是你用错了对象。
真正容易被忽略的点：父容器宽度必须大于子元素宽度。如果父容器只有 width: 300px，而你给子元素设 width: 400px，那 margin: 0 auto 依然不会产生居中效果——空间不够，分无可分。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
