margin: auto 在块级元素上失效的典型原因是未设置明确 width；其水平居中需满足块级元素且 width 为具体值，否则浏览器无法分配左右外边距。
margin: auto 在块级元素上失效的典型原因
直接写 margin: auto 却没居中，大概率是因为盒子没设 width。CSS 规范里，margin: auto 水平居中生效的前提是：元素为块级（或 inline-block + 特定条件），且 width 为明确值（不能是 auto）。浏览器需要知道“剩余空间怎么分”，没有宽度就无从分配左右 margin。
- 常见错误写法：
div { margin: auto; }→ 宽度默认auto，左右 margin 都算 0 - 正确搭配：
div { width: 300px; margin: auto; } - 注意：
float、position: absolute或display: flex等会破坏常规文档流，也会让margin: auto失效
inline-block 元素用 margin: auto 居中要额外加父容器 text-align
如果目标盒子是 display: inline-block，单靠自身 margin: auto 不起作用——它只对块级盒生效。此时得靠父容器控制文本对齐：
- 父容器加
text-align: center - 子元素设
display: inline-block（无需设宽度，但设了也 OK） - 子元素自身
margin: auto仍无效，别写
.parent { text-align: center; }
.child { display: inline-block; }
flex 布局下 margin: auto 的行为完全不同
在 display: flex 容器里，margin: auto 会沿主轴和交叉轴“吸走”剩余空间，变成一种强力对齐手段，跟块级流里的语义完全不一样：
- 子元素写
margin: auto→ 同时水平垂直居中（无论宽高是否固定） - 只写
margin-left: auto→ 推到容器最右；margin-top: auto→ 推到最下 - 这种用法不依赖子元素宽度，也不受
text-align影响
.container { display: flex; }
.item { margin: auto; }
IE8 及更老浏览器不支持 margin: auto 居中
如果你还在维护需要兼容 IE8 的项目，margin: auto 水平居中基本不可靠（尤其配合 min-width 或某些盒模型时）。稳妥方案是：
立即学习“前端免费学习笔记（深入）”；
- 用
text-align: center+inline-block（IE8 支持） - 或用绝对定位 +
left: 50%+margin-left: -半宽（需已知宽度） - 避免在老环境里依赖
margin: auto的自动计算逻辑
width 是不是 auto —— 而不是立刻怀疑 CSS 写错了。 
