margin-top不是居中手段，它只会把元素往下推；所谓“失效”或“连带下移”是块级元素间外边距合并（margin collapse）的默认行为，并非bug。
直接说结论：margin-top 本身不是居中手段，它只会把元素往下推——想居中，得换思路。
为什么margin-top看起来“失效”或“连带下移其他元素”？
这不是 bug，是 CSS 默认行为：块级元素间存在外边距合并（margin collapse）。比如给 <h2></h2> 加 margin-top: 100px，如果它紧挨着一个 <div> 或 <code><img>，浏览器会把两者的上下 margin 合并成一个，结果是整个后续区域一起下移，而不是只有标题动了。
- 常见错误现象：
<h2 class="title">标题</h2> <img src="...">中只给.title设margin-top，但图片也跟着下移 - 根本原因：两个相邻块级元素之间没有隔离层（如 border、padding、overflow、伪元素等）
- 别试图靠调大
margin-top“凑”出垂直居中效果——它不解决定位问题，只制造新偏移
margin: 0 auto 水平居中却不动？检查这三件事
很多人写完 margin: 0 auto 发现没反应，其实它只在特定条件下生效：
- 元素必须是块级（
display: block或默认块行为），<span></span>、<a></a>这类 inline 元素不认这个规则 - 必须显式设置
width（不能是100%，否则没剩余空间可分）；max-width也可以，但width: fit-content在老浏览器里支持差 - 父容器不能是
display: flex或display: grid—— 这两种布局会接管子元素对齐逻辑，margin: auto被忽略
真正靠谱的居中方案选哪个？看场景
不用猜，按你要解决的问题直接匹配：
- 纯水平居中（按钮、卡片、logo）→ 父容器加
display: flex+justify-content: center - 水平 + 垂直居中（弹窗、加载提示）→ 父容器
display: flex+justify-content: center+align-items: center，或者用position: absolute+top: 50%+left: 50%+transform: translate(-50%, -50%) - 行内内容（文字、图标）→ 父容器设
text-align: center，不是给子元素加margin - 需要脱离文档流（遮罩层、tooltip）→ 绝对定位方案更可控，但务必确保父容器有
position: relative
最容易被忽略的点：居中从来不是单个元素的事，而是父子容器协作的结果。写 margin-top 之前，先问自己——你真需要“往下推”，还是需要“放在中间”？方向错了，再调数值也没用。
