margin: 0 auto本身不参与折叠，但父容器未触发BFC导致margin折叠→高度塌陷→居中基准偏移；解决方法是父容器加overflow: hidden（创建BFC）或改用flex布局。
margin: 0 auto 在 margin 折叠场景下为何失效
当父容器内存在相邻块级子元素，且它们的上下 margin 发生合并（即 margin 折叠），margin: 0 auto 本身不会被折叠，但它的居中效果常被误判为“失效”——实际是父容器高度塌陷或子元素位置被连带偏移所致。典型现象：你写了 margin: 0 auto 的 div 看起来没居中，检查发现它上面紧挨着一个 p，而那个 p 的 margin-bottom 和当前 div 的 margin-top 合并了，导致整个布局上浮。
关键点在于：margin: 0 auto 只负责左右均分，不干预上下 margin 行为；一旦上下 margin 折叠，父容器可能没形成 BFC，高度计算异常，视觉上就“偏了”。
- 父容器未触发 BFC 是根本原因：默认文档流中，块级兄弟元素的垂直 margin 会折叠，父容器若没设置
overflow、border或padding，就无法包裹子元素的 margin -
margin: 0 auto的元素自身margin-top/bottom若参与折叠，会导致它相对父容器顶部的位置不可控 - 不要指望靠给该元素加
margin-top: 1px来“破折”，这治标不治本，还可能引发新折叠
用 overflow: hidden 阻断 margin 折叠并保居中
最直接有效的解法，是在父容器上加 overflow: hidden（或 overflow: auto），强制其创建 BFC，从而包裹内部所有 margin，阻止折叠。这样 margin: 0 auto 才能按预期工作。
注意：这个方案不改变子元素样式，只修正父容器行为，兼容性好（IE5.5+ 支持），且不影响居中逻辑。
立即学习“前端免费学习笔记（深入）”；
- 只需给父容器加一行：
overflow: hidden（或overflow: auto），无需改子元素 - 如果父容器需要内容溢出（比如滚动），用
overflow: auto更安全 - 避免在
body或全局容器上滥用overflow: hidden，可能意外截断弹层或下拉菜单 - 该属性会让父容器撑开高度，自然包含子元素 margin，
margin: 0 auto就能正确计算左右剩余空间
flex 布局绕过 margin 折叠问题
Flex 容器天然不发生 margin 折叠——子元素的 margin 不会与兄弟或父容器合并。如果你的目标元素在 flex 容器里，justify-content: center 居中完全不受 margin 折叠干扰。
这是现代项目中最推荐的路径，尤其当你本就需要弹性排版时，一并解决居中和折叠两个问题。
- 父容器设
display: flex+justify-content: center，子元素无需width或margin: 0 auto - 子元素即使有
margin-top: 20px，也不会和前面兄弟元素折叠，位置稳定 - 老版 Safari（iOS 8.4–9.3）需加
-webkit-justify-content: center - 慎用
display: flex在body或html上，可能影响全局字体渲染或第三方组件布局
绝对定位 + transform 不依赖 margin 计算
当元素必须脱离文档流（如模态框、tooltip），又怕 margin 折叠干扰定位，position: absolute 配合 transform: translate(-50%, -50%) 是唯一不看 margin 的居中方式。
它完全跳过文档流中的 margin 合并逻辑，靠自身偏移实现视觉居中，和父容器是否触发 BFC 无关。
- 父容器需设
position: relative（或其它非static值）作为定位上下文 - 子元素设
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) - 该方案对宽高无要求，响应式友好，但元素脱离流后不占空间，需额外考虑遮挡或滚动行为
- IE9+ 支持
transform，若需兼容 IE8，只能退回margin-left: -w/2等固定值写法
真正麻烦的不是选哪种方法，而是没意识到 margin 折叠和居中是两个独立机制——前者影响布局高度和位置基准，后者只管左右分配。一旦父容器没撑起可靠的高度上下文，再怎么调 margin: 0 auto 都只是在错误的起点上做运算。
