负外边距居中需已知宽高，通过绝对定位+负margin实现：top:50%、left:50%后，margin-left设为负半宽、margin-top设为负半高，父容器须有position:relative和明确高度。
负外边距居中依赖已知宽高
负外边距本身不自动居中，它只是把元素往反方向“拉”，所以必须提前知道 width 和 height，否则 margin-left 和 margin-top 没法设成精确的负一半值。常见错误是给登录框设了 width: 100% 或用 flex 混搭，结果负外边距失效或错位。
适用场景：固定尺寸的登录表单（比如 width: 400px、height: 300px），且父容器有明确高度（如全屏 html, body { height: 100% }）。
- 父容器需设
position: relative或position: absolute，否则top: 50%; left: 50%会相对于视口定位，容易偏移 -
margin-left必须是负的宽度一半，例如margin-left: -200px对应width: 400px -
margin-top同理，margin-top: -150px对应height: 300px
标准写法：绝对定位 + 负 margin
这是最可控的组合。只靠 margin: 0 auto 无法垂直居中，必须配合定位。
.login-box {
width: 400px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -150px;
}
注意：top: 50% 是从父容器顶部到元素**上边缘**的距离，margin-top: -150px 才把整个盒子向上挪回一半高度——这两步缺一不可。
IE8 及更老浏览器的兼容性坑
IE8 支持 position: absolute 和负 margin，但若父容器没设 height 或 position，它会按怪异模式计算，导致 top: 50% 失效。错误现象是登录框贴着顶部或消失。
- 确保
html, body { height: 100% }，且父容器（比如<div class="container">）有 <code>position: relative; height: 100% - 避免在登录框上同时使用
transform: translate(-50%, -50%)，它和负外边距混用会导致 IE8 崩溃或错位 - 如果用 CSS 预处理器（如 Sass），别让
-200px硬编码，改用margin-left: calc(-#{400px / 2})类似逻辑，但 IE8 不支持calc()，所以还是手算稳妥 -
transform: translate(-50%, -50%)：只需top: 50%; left: 50%，无需知道宽高，但 IE9+ 才支持 -
display: flex在父容器上：用justify-content: center; align-items: center，干净利落，但旧版 Safari 需加-webkit-前缀 - 真正需要兼容 IE7/8 时，负外边距仍是少数可靠手段之一，只是得反复验证父容器的渲染上下文
比负外边距更现代的替代方案
负外边距不是坏方法，但它脆弱——改个宽度就得同步改两个地方。现在主流项目基本用 transform 或 flex 替代：
实际开发中，一旦登录框尺寸可能变化（比如响应式断点下宽度不同），负外边距就很难维护——这时候硬编码的 -200px 就成了最隐蔽的 bug 来源。
