最可靠的方式是用position: fixed配合top: 50%、left: 50%和transform: translate(-50%, -50%)实现登录框在视口内固定居中，父容器需避免干扰定位上下文。
登录框用 position: absolute + transform 居中才真正“固定不动”
用 margin: 0 auto 只能水平居中，且随页面滚动而移动；要让它在视口里“钉死”在中间、不随滚动偏移，必须脱离文档流。最可靠的方式是 position: absolute 配合 transform: translate(-50%, -50%)。
- 父容器（比如
<body>或一个全屏<div class="overlay">）必须设position: relative或position: fixed，否则absolute会以视口为参考，但可能被滚动影响 - 登录框自身设
position: absolute; top: 50%; left: 50%—— 注意：这会让左上角落在中心点，不是框体中心 -
transform: translate(-50%, -50%)是关键补丁，把自身宽高一半拉回来，实现真居中 - 如果父容器用了
overflow: hidden或transform（比如某些动画 wrapper），absolute子元素会以它为定位上下文，可能导致偏移，得检查 DOM 层级
为什么不用 position: fixed？它其实更合适
对“固定不动”的需求，position: fixed 比 absolute 更本质——它直接相对于视口定位，天生不随滚动位移。只要写对，一行 top: 50% + left: 50% + transform 就稳了。
- 必须加
top: 50%; left: 50%，不能只靠margin: auto（fixed 元素不响应 margin auto） - 仍需
transform: translate(-50%, -50%)，原理同上，否则定位点是左上角 - 避免给
fixed元素设height: 100%或width: 100%，除非你真要铺满——多数登录框是固定尺寸（如width: 400px; height: 480px） - 移动端软键盘弹出时，部分 Android 浏览器会重算视口高度，导致
fixed元素上浮；可加viewportmeta 的height=device-height缓解，但无法根治
min-height: 100vh + flex 不算“固定不动”，但体验接近
用 display: flex 把登录框撑到视口中央，视觉上居中，但它仍在文档流里——页面内容变长后，它会随滚动离开视口中心。所以它不满足“固定不动”，只适合单页无滚动的登录页。
- 父容器（如
<body>）设min-height: 100vh; display: flex; justify-content: center; align-items: center - 登录框自身不需设宽高，但建议加
max-width: 480px防过宽，再用margin: 0 auto辅助微调 - 如果页面后续加载内容导致高度增长，这个登录框会被顶下去，不再居中——这不是 bug，是 flex 布局的自然行为
- 它对无障碍更友好（无需
aria-hidden等额外处理），适合简单静态页
容易被忽略的兼容性细节
看似几行 CSS 就搞定，但实际部署常因小配置翻车。这些点不检查，居中就失效。
立即学习“前端免费学习笔记（深入）”；
-
html, body { height: 100% }不是必须的，但若父容器没高度，vh或absolute可能计算异常；建议显式设html { height: 100% }，body { min-height: 100% } -
transform在旧版 Safari（iOS 12 以下）需要-webkit-transform前缀，虽然现在极少遇到，但内网系统或政企项目仍可能踩坑 - 如果登录框外层套了
transform: scale(0.95)或rotate()的 wrapper，会创建新定位上下文，导致absolute子元素相对它定位——删掉 wrapper 的 transform，或把登录框提一级 - 别给登录框设
z-index: 0或负值，尤其当页面有 modal、toast 等浮层时，它可能被盖住；起步用z-index: 1050（Bootstrap 的 modal-zindex 基准）比较安全
position: fixed + transform 是最直白、最少副作用的选择，但必须确保父级没干扰它的定位上下文——这点比写法本身更容易被忽略。 
