用 display: flex 实现真正居中，父容器必须设 min-height: 100vh；仅给 <form> 加 margin: 0 auto 或 text-align: center 无法实现垂直+水平居中，关键在于最外层容器（如 body 或 login-wrapper）需设 display: flex、justify-content: center、align-items: center 且具备高度基准。
用 display: flex 实现真正居中，父容器必须设 min-height: 100vh
只给 <form> 加 margin: 0 auto 或 text-align: center，永远做不到垂直+水平都居中。关键在“谁来当 Flex 容器”——必须是包裹登录框的最外层容器（比如 <body> 或一个 <div id="login-wrapper">），且它得有高度基准。
常见失效现象：justify-content: center 写了但没反应，八成是父容器没设 min-height: 100vh，或者被上级 display: grid / display: flex 布局接管了。
-
body或外层容器加：display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; -
<form>自身不设height，用max-width: 480px; width: 100%;防大屏过宽 - 所有表单控件（
<input>、<button>）统一加box-sizing: border-box;，避免 padding 撑出宽度
为什么 margin: 0 auto 在登录框上大概率失败
它只管水平居中，而且依赖三个硬条件：元素是块级、有明确宽度、父容器不能是 flex 或 grid。现代页面里，<body> 或外层 <div> 很可能已是 display: flex，这时 margin: 0 auto 直接被忽略。
典型翻车现场：<form style="width: 100%; margin: 0 auto"> —— width: 100% 没剩余空间可分，“auto”就无从计算。
立即学习“前端免费学习笔记（深入）”；
- 若坚持用
margin: 0 auto，必须设width或max-width（如max-width: 400px） - 父容器不能有
display: flex/display: grid - 不能同时设
position: absolute、float或display: inline-block
模态弹窗类登录框必须用 position: absolute + transform
当登录框浮在遮罩层（<div class="overlay">）之上时，脱离文档流是唯一合理选择。但只写 top: 50%; left: 50% 会把左上角钉在中心点，导致整体偏右下。
错误日志式提示：Uncaught TypeError: Cannot read property 'offsetWidth' of null 常伴随这种定位偏差出现，说明 JS 尺寸计算逻辑被破坏。
- 遮罩层父容器必须设
position: relative - 登录框自身设：
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 避免用
margin-top: -200px这类固定像素负边距——宽高一变就错位
移动端和缩放下容易被忽略的三点
PC 上调好了，手机一打开就贴左或溢出；缩放到 125% 后登录框轻微晃动——问题不在居中逻辑本身，而在响应式基础没打牢。
- 漏了
<meta name="viewport" content="width=device-width, initial-scale=1"> -
<form>设了width: 400px却没配max-width: 100%和媒体查询 - 用了
position: absolute+transform，但在 Windows + Chrome 缩放下，非比例渲染会导致 1–2px 偏移
真正难的不是写出居中代码，而是确保它在不同设备、不同缩放、不同祖先布局下都稳得住。多数人卡在第一步：没想清楚“谁该承担高度责任”。
