最可靠方案是父容器设display: flex、justify-content: center、align-items: center和min-height: 100vh；需确保html/body高度为100%，且flex作用于最外层包裹容器而非登录框自身。

用 Flex 布局让登录框在页面中垂直+水平居中

最可靠、兼容性好（现代浏览器全支持）、代码量少的方案就是 display: flex。关键不是“怎么写”，而是“写在哪”——必须作用于父容器，且该父容器需占满视口高度。

常见错误是只给登录框本身加 flex，结果毫无反应；或者忘了设 html 和 body 的高度。

• html, body { height: 100%; margin: 0; } —— 缺一不可，否则 height: 100vh 在某些场景下会失效
• 外层容器（比如 <div class="container">）设为 display: flex; justify-content: center; align-items: center; height: 100vh;
• 登录框（<form> 或 <div class="login-box">）无需额外定位属性，自然居中

<style>
html, body { height: 100%; margin: 0; }
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.login-box {
  padding: 24px;
  border: 1px solid #ddd;
  border-radius: 6px;
  width: 320px;
}
</style>

<div class="container">
  <form class="login-box">
    <input type="text" placeholder="用户名"><br>
    <input type="password" placeholder="密码"><br>
    <button type="submit">登录</button>
  </form>
</div>

用绝对定位 + transform 实现兼容老版本 Chrome/Firefox

如果项目必须支持 IE10 或旧版 Android Browser，flex 可能不稳定，这时用 position: absolute 更稳妥。但注意：它依赖父容器有明确高度，且容易因 transform 触发重排问题。

典型报错是登录框飘到左上角或完全消失——多半因为没给父容器设 position: relative。

立即学习“前端免费学习笔记（深入）”；

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 父容器（如 <body> 或外层 <div>）必须设 position: relative 或 position: absolute
• 登录框设 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
• 不要用 margin-top: -Xpx 手动计算偏移，响应式下会错位

为什么不用 margin auto + inline-block？

有人试过把登录框设成 display: inline-block，再用 text-align: center 和 vertical-align: middle 配合 line-height 居中，结果在表单控件（尤其是 <input>）上经常失灵。

根本原因是：vertical-align 对块级元素无效，而 line-height 控制的是行内内容基线，不是容器中心。一旦输入框里有文字、placeholder 或浏览器默认 padding，上下就对不齐。

• Chrome 对 input 的 line-height 解析不一致，Firefox 更严格
• margin: auto 在非 flex/absolute 场景下，对垂直方向无效（除非是 table-cell）
• 这种写法调试成本高，不如直接上 flex 或 absolute

移动端适配时最常被忽略的一点

登录框在 iPhone 上左右留白异常，或在安卓小屏上被系统键盘顶出视口——问题往往不在居中逻辑本身，而在 viewport 设置和键盘弹起后视口高度变化。

• 确保 <meta name="viewport" content="width=device-width, initial-scale=1"> 存在且未被覆盖
• 避免给 .login-box 设固定 height，优先用 max-height + overflow-y: auto
• iOS Safari 键盘弹出时，100vh 会按“视觉视口”计算，导致容器变矮；可改用 100dvh（Chrome 105+/Safari 16.4+ 支持），或监听 resize 动态修正

真正麻烦的从来不是“怎么居中”，而是“居中之后，它还在不在屏幕里”。