最可靠方案是父容器设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">）设为 <code>display: flex; justify-content: center; align-items: center; height: 100vh;
• 登录框（<form></form> 或 <div class="login-box">）无需额外定位属性，自然居中 <pre class="brush:php;toolbar:false;">&lt;style&gt; 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; } &lt;/style&gt;&lt;div class=&quot;container&quot;&gt; &lt;form class=&quot;login-box&quot;&gt; &lt;input type=&quot;text&quot; placeholder=&quot;用户名&quot;&gt;&lt;br&gt;&lt;input type=&quot;password&quot; placeholder=&quot;密码&quot;&gt;&lt;br&gt;&lt;button type=&quot;submit&quot;&gt;登录&lt;/button&gt; &lt;/form&gt; &lt;/div&gt;</pre> <h3>用绝对定位 + transform 实现兼容老版本 Chrome/Firefox</h3> <p>如果项目必须支持 IE10 或旧版 Android Browser，<code>flex 可能不稳定，这时用 position: absolute 更稳妥。但注意：它依赖父容器有明确高度，且容易因 transform 触发重排问题。

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

  

  Wechat HTML Publisher

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

  下载
  • 父容器（如 或外层 <div>）必须设 <code>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 动态修正

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