用flex实现登录框居中是最稳方案，父容器设display:flex、justify-content:center、align-items:center及height:100vh；IE11需加-ms-flex前缀或fallback为absolute+transform；grid适合扩展布局；注意100vh在iOS的跳动问题，推荐min-height:100vh或100dvh。
用 flex 实现登录框居中是最稳的方案
现代浏览器下，display: flex 是最可靠、代码最少、响应性最好的方式。它天然规避了传统 margin: auto 在绝对定位中失效、或 transform 依赖固定宽高的问题。
关键点在于把父容器设为 flex 容器，并用两个属性控制：水平用 justify-content: center，垂直用 align-items: center。
- 父容器必须有明确高度（比如
height: 100vh），否则无法垂直居中 - 登录框本身无需设置
position或margin，避免干扰 flex 布局 - 如果登录框内容过多导致溢出，加
overflow: auto更安全
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<form style="width: 320px; padding: 24px; border: 1px solid #ddd;">
<input type="text" placeholder="用户名"><br>
<input type="password" placeholder="密码"><br>
<button type="submit">登录</button>
</form>
</div>
IE11 下 flex 居中要补前缀和 fallback
IE11 支持 flex，但对 align-items: center 在某些文档模式下表现异常，尤其当子元素是 <form> 这类替换元素时可能偏上。
- 加
-ms-flex-align: center和-ms-flex-pack: center双前缀 - 更稳妥的做法是套一层
<div>作为 flex 子项（IE 对嵌套 flex 更友好） - 若需兼容更低版本 IE，改用
position: absolute+transform: translate(-50%, -50%)，但必须给登录框设固定宽高
示例 fallback：
立即学习“前端免费学习笔记（深入）”；
<div style="position: relative; height: 100vh;">
<form style="position: absolute; top: 50%; left: 50%; width: 320px; transform: translate(-50%, -50%); ...">
...
</form>
</div>
用 grid 居中适合需要复杂布局扩展的场景
如果你后续可能在登录框周围加 logo、footer、语言切换等区域，display: grid 比 flex 更易扩展。单行单列居中只需两行声明。
- 父容器设
display: grid和place-items: center（等价于justify-items: center; align-items: center） -
place-items在 Safari 10.1+、Chrome 57+、Firefox 45+ 均支持，IE 不支持 - 如果登录框需要自适应宽度，
max-width比width更灵活
<div style="display: grid; place-items: center; height: 100vh;">
<form style="max-width: 320px; padding: 24px;">
...
</form>
</div>
别忽略视口单位和移动端缩放问题
100vh 在 iOS Safari 中有坑：地址栏收起/展开会触发视口高度变化，导致登录框跳动；部分安卓 WebView 也存在类似问题。
- 用
min-height: 100vh替代height: 100vh，防止内容撑高后被截断 - 更健壮的写法是
min-height: 100dvh（dynamic viewport height），Chrome 100+、Safari 16.4+ 支持，能响应地址栏变化 - 如果项目必须兼容老设备，可监听
resize事件动态重设高度，但注意防抖
实际开发中，dvh 还没完全普及，多数团队仍用 100vh + min-height 组合过渡——这点容易被忽略，直到测试时发现 iPhone 上登录框忽高忽低。
