最可靠方式是用display: flex+justify-content: center+align-items: center+min-height: 100vh，父容器需有明确高度，子元素不能脱离文档流；absolute+transform存在兼容性、可访问性及动态内容适配问题。
登录框在页面中水平垂直居中，最可靠、现代的方式是用 display: flex 配合 justify-content 和 align-items，而不是浮动、margin: auto 或绝对定位加负边距。
用 Flex 布局让登录框真正居中（推荐）
这是目前兼容性好（Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+）、语义清晰、响应式友好的方案。关键在于把 body 或一个全高容器设为 flex 容器，并让子元素居中。
- 必须给父容器设置
height: 100vh（不能只靠height: 100%，否则可能失效） - 父容器需声明
display: flex，再用justify-content: center（水平）和align-items: center（垂直） - 登录框本身无需设置宽高，但建议加
max-width和width: 100%以适配小屏
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
}
.login-box {
width: 100%;
max-width: 400px;
padding: 24px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
</style><div class="login-box">
<h2>登录</h2>
<form>
<input type="text" placeholder="用户名" required><input type="password" placeholder="密码" required><button type="submit">登录</button>
</form>
</div>
为什么不用 absolute + transform？
虽然 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) 能实现居中，但它有明显隐患：
- 父容器必须是
position: relative或absolute，否则会相对于 viewport 定位，易被滚动影响 - 当登录框内容高度动态变化（比如错误提示展开），
transform不会自动重算，可能造成视觉偏移 - 在 Safari 旧版本中，
transform对表单控件的 focus 状态渲染偶有异常 - 可访问性上，脱离文档流后，屏幕阅读器顺序可能错乱（尤其没设
aria-labelledby时）
如果必须兼容 IE10/IE11，怎么处理？
IE10–11 支持 flex，但语法不完全一致：不支持 align-items: center 在 min-height 容器上的表现，且 vh 单位在某些移动端 IE 模拟器中计算不准。
- 用
height: 100%+html, body { height: 100% }替代100vh更稳妥 - 添加老式 flex 前缀：
display: -ms-flexbox、-ms-flex-pack: center、-ms-flex-align: center - 避免对
.login-box使用margin: auto—— IE 下在 flex 容器里它不生效
真正要注意的是：居中只是视觉结果，不是目的。如果登录框在小屏上被截断、键盘弹起后消失、或焦点管理混乱，再“居中”也没用。优先保证容器高度可计算、内容可滚动、交互可预期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
