margin: 0 auto 在浮动元素上无效，因浮动使元素脱离文档流，父容器无法计算剩余宽度，左右外边距被规范设为0；真正有效的替代方案是改用 flex 布局或 inline-block 配合 text-align。
margin: 0 auto 在浮动元素上根本不会计算
不是你写错了，是浏览器压根不走这套逻辑。margin: 0 auto 要生效，必须依赖“父容器剩余宽度可被均分”这个前提，而 float 一加，元素就脱离文档流——父容器连它的宽度都“看不见”，更不会去算左右还剩多少空间。此时 margin-left 和 margin-right 的计算结果直接被规范设为 0，不是失效，是跳过。
常见错误现象和误判点
很多人以为加了 overflow: hidden 或 display: table 就“修好了”，其实只是父容器自身被居中了，子元素仍紧贴左边缘：
-
.box { float: left; width: 200px; margin: 0 auto; }→ 元素纹丝不动 - 父容器加了
margin: 0 auto后看起来居中了 → 实际是父容器在居中，内层浮动项未受任何影响 - 用
max-width或width: 80%替代固定宽 → 依然无效，因为只要没脱离浮动，计算基准就不存在 - 在
flex容器里给子元素加float→float被忽略，但margin: auto行为也变得不可预测
真正能起效的替代方案（按推荐顺序）
别硬套 margin: 0 auto，它不是为浮动设计的。选一条路走到底：
- 删掉所有
float，父容器改用display: flex; justify-content: center;—— 最干净，子元素无需设宽，也不怕内容撑开 - 保留浮动上下文但换方式：子元素改
display: inline-block，父容器加text-align: center；注意删 HTML 换行符或设font-size: 0避免空隙 - 必须用浮动且宽度固定：子元素加
position: relative; left: 50%; margin-left: -100px;（假设宽 200px），但响应式缩放时极易错位
最容易被忽略的底层约束
浮动不是孤立样式，它是整套旧布局逻辑的起点。哪怕只在一个地方混用 float 和 flex，或忘了清除塌陷、漏掉 position: relative 锚点，整个居中链就会断裂。真正麻烦的从来不是“怎么写”，而是“为什么写了却没反应”——那往往是因为某一层的宽度、定位或流状态已经崩了。
立即学习“前端免费学习笔记（深入）”；
