margin: auto 水平居中需满足两个前提：元素为块级（display: block）且设置了明确宽度；否则对内联、浮动、绝对定位元素或无宽元素无效。
当 margin: auto 没有让元素水平居中，通常是因为它只对块级元素（block）且设置了明确宽度时才生效。如果元素是内联元素（如 ）、浮动元素、绝对定位元素，或没有设宽，margin: auto 就会失效。
确保元素是 display: block
默认为内联的元素（如 、、margin: auto 的居中逻辑。需显式设置：
display: block;- 同时必须指定
width（不能是auto或未设置）
✅ 正确示例：
.center-box {
display: block;
width: 300px;
margin: 0 auto;
}
检查父容器是否撑开、无特殊定位干扰
如果父元素是 position: absolute、fixed 或设置了 float，子元素的 margin: auto 可能被忽略。另外，父容器需有正常文档流宽度（比如不是 width: 0 或 overflow: hidden 导致内容塌陷）。
立即学习“前端免费学习笔记（深入）”；
- 避免给父元素加
float或position: absolute - 确保父容器没意外清除了子元素的块格式化上下文（BFC）影响
- 可临时加
border: 1px solid red查看父容器实际尺寸
替代方案：flex 布局更可靠
如果兼容性允许（现代浏览器），用 Flex 更简洁稳定：
- 给父容器设置
display: flex; justify-content: center; - 子元素无需设宽、无需
display: block - 天然支持居中，且不受浮动/定位干扰
⚠️ 注意：Flex 居中的是子元素在主轴（默认水平）上的位置，垂直居中需额外加 align-items: center;
图片等替换元素要小心
margin: auto 不起作用。正确做法：
- 加
display: block;（推荐） - 或用
text-align: center在父容器上（适用于单个内联元素）
❌ 错误：
✅ 正确：
基本上就这些。核心就两点：块级 + 有宽，margin: auto 才真正干活。不复杂但容易忽略。
