最直接可靠的方式是给父容器设 display: flex、justify-content: center 和 align-items: center，并确保其高度明确（如 min-height: 100vh）； 自身无需 margin: 0 auto，建议加 max-width: 480px 防过宽。
用 flex 布局实现视口级自动居中
最直接、最可靠的方式是给包裹 <form></form> 的父容器（比如 或一个全高 <div>）设置 <code>display: flex，再加 justify-content: center 和 align-items: center。它不依赖元素尺寸，也不需要 JS 计算，缩放窗口时天然响应。
关键点：
- 父容器必须有明确高度，
min-height: 100vh比height: 100vh更稳妥（避免内容撑高后垂直居中失效） -
<form></form>自身不用设width，但建议加max-width: 480px防止宽屏下过宽 - 不要在
<form></form>上写margin: 0 auto—— flex 容器里这个会被忽略 - IE10+ 支持，IE9 及更早版本不支持（如需兼容，往下看）
用 absolute + transform 实现脱离文档流的居中
当登录框需要盖在遮罩层上（比如 position: fixed 的弹窗），或要避开页面正常流时，position: absolute 是合理选择，但必须配 transform: translate(-50%, -50%)。
常见错误现象：top: 50%; left: 50% 后，表单左上角对准了中心点，整体偏右下。
立即学习“前端免费学习笔记（深入）”；
正确写法要点：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 父容器（如遮罩层
<div class="overlay">）必须设 <code>position: relative或fixed -
<form></form>设position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) - 宽度推荐用
width: 90%+max-width: 400px+min-width: 280px，兼顾小屏和可读性 - 别漏掉
box-sizing: border-box，否则 padding 会让实际宽度超预期 - 给
加text-align: center，指望整个登录框居中 → 失效 - 给
<form></form>加margin: 0 auto却没设width或用了width: 100%→ 自动失效（无剩余空间可分） - 同时加
float: left和margin: 0 auto→float让auto彻底失效 - 是否加了
@media (max-width: 480px)调整padding和font-size？默认值在小屏下会挤满屏幕 -
<form></form>内部<input>是否设了width: 100%？否则可能窄于容器，视觉上“不居中” - 有没有固定高度（如
height: 240px）？应改用min-height或让内容自然撑开 - 遮罩层是否用了
overflow: hidden？可能导致小屏滚动时登录框被裁切
为什么不用 margin: 0 auto + text-align?
margin: 0 auto 只能水平居中，对垂直方向完全无效；text-align: center 只影响行内内容（如按钮文字、<label></label>），对 <form></form> 这种块级元素本身没作用。
典型误用场景：
小屏适配容易被忽略的细节
桌面端居中没问题，一到手机就贴顶/溢出，往往不是居中逻辑错，而是安全间距和尺寸约束没跟上。
必须检查这几项：
