最稳妥方案是父容器设position: relative（或height: 100vh），子元素用position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)，因该组合不依赖宽高、基于自身尺寸计算、兼容性好且避免回流。
用 transform + position: absolute 居中登录框最稳妥
直接写 margin: 0 auto 对登录框无效，除非它是个有固定宽度的块级盒子且在正常流里；而登录框常需要脱离文档流（比如遮罩层上居中），这时必须用定位 + 位移。核心逻辑是：先用 left: 50% 和 top: 50% 把元素左上角移到视口中心，再用 transform: translate(-50%, -50%) 把自身回拉一半宽高。
常见错误现象：
- 只写
left: 50%没加transform→ 登录框左边缘在中间，整体偏右 - 写了
transform: translateX(-50%)却漏了 Y 轴 → 水平居中但垂直位置错乱 - 父容器没设
position: relative或没撑满高度 →top: 50%计算基准不对
实操建议：
- 给登录框外层容器（如
<div id="login-box">）设置 <code>position: absolute - 必须同时声明
left: 50%和top: 50% -
transform值必须是translate(-50%, -50%)，不能简写成translateX或translateY单独调用 - 若登录框需响应式（比如移动端缩放），该方案依然有效，
transform基于自身尺寸计算，不依赖父容器宽度 -
margin: 0 auto要求元素有明确宽度，且必须在正常流中；一旦加了position: absolute，margin: auto就失效了 -
text-align: center只影响行内内容，对整个登录框容器无效 - Flexbox 虽然更现代，但在老项目或需要兼容 IE10 以下时，
transform方案反而更可靠
transform 的百分比是相对于自身宽高的，不是父容器
这是最容易被误解的一点。很多人以为 transform: translate(-50%, -50%) 是把元素往左、往上挪父容器宽高的 50%，其实不是——它挪的是元素自己 offsetWidth 和 offsetHeight 的 50%。所以不管登录框是 300px 还是 80vw，位移量都自动适配。
对比其他方案：
IE 中 transform 需要前缀，但仅限旧版本
IE9 不支持无前缀的 transform，必须加 -ms-transform；IE10+ 已支持标准写法。如果你的项目还要支持 IE9，得这样写：
.login-box {
position: absolute;
left: 50%;
top: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
不过注意：-ms-transform 在 IE9 中只支持 2D 变换，3D（如 rotateX）仍不可用；而且 IE9 不支持 vh 单位，如果登录框高度依赖 100vh，得额外用 JS 补偿。
别忘了给父容器设高度，否则 top: 50% 没意义
top: 50% 的计算基准是父容器的 height。如果父容器是 且没设高度，它的 height 默认为 auto，top: 50% 实际等于 0。所以要么：
- 给
或直接父容器加height: 100vh - 或者干脆把登录框挂到
下，然后设html, body { height: 100%; } - 再或者用 Flexbox 替代（见下条），但那就不用
transform了
真正容易被忽略的点是：这个高度声明必须“可继承”。比如父容器用了 display: flex 但没设 height，子元素的 top: 50% 依然会失效——因为 flex 容器的高度还是 auto。
