display: flex 是登录框居中最快最稳的起点，需配合 min-height: 100vh、justify-content: center 和 align-items: center；margin: 0 auto 易失灵因依赖块级、定宽及非 Flex 父容器；模态框用 position: absolute + transform: translate(-50%,-50%) 更可靠。
display: flex 是登录框居中最快、最稳的起点，别从 margin: 0 auto 或 position: absolute 开始试——它们要么只管水平、要么依赖宽高或上下文，一动就失效。
为什么 margin: 0 auto 在登录页经常失灵
它只做水平居中，且必须同时满足三个条件，缺一不可：
- form 必须是块级元素（默认是，没问题）
- form 必须有明确的 width 或 max-width（写 width: 100% 就等于没写）
- 父容器不能是 display: flex 或 display: grid（否则 margin: auto 被直接忽略）
常见错误现象：form 加了 margin: 0 auto 却死贴左上角——八成是父容器用了 Flex 布局，或者忘了设 max-width。
display: flex 居中必须配 min-height: 100vh
justify-content: center 和 align-items: center 要起作用，父容器得有高度可“对齐”。只写 height: 100% 往往无效，因为百分比高度需要祖先链上每层都有显式高度。
稳妥写法：
- 给包裹 form 的父容器（比如 <div class="login-wrapper">）加：<br><pre class="brush:php;toolbar:false;">.login-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}</pre>
- <code>form 自身不用设 width，但建议加 max-width: 480px 防大屏过宽
- 如果页面有 header/footer，把 min-height: 100vh 换成具体高度（如 height: calc(100vh - 80px)），避免撑出滚动条
模态登录框必须用 position: absolute + transform
当登录框浮在遮罩层（<div class="overlay">）上时，脱离文档流是刚需。<br>
只写 <code>top: 50%; left: 50% 会让左上角钉在中心点，整体偏右下。
正确组合：
- 遮罩层（父容器）设 position: relative
- form 设 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)
- 不要混用 margin-left: -200px 这类负外边距——它要求宽高已知，改个尺寸就得同步改两处，易错且难维护
注意：滚动时该方案可能失稳，且屏幕阅读器兼容性弱于 Flex 方案
输入框、按钮这些内部元素别乱加 margin: 0 auto
input 和 button 默认是行内块（display: inline-block），在 Flex 容器里不响应 margin: 0 auto。
想让按钮水平居中：
- 给它的直接父容器（比如一个 <div>）加 <code>text-align: center
- 或者把按钮放进 Flex 容器，用 justify-content: center
- 别在 input 上设 display: block 后又加 margin: 0 auto——除非你真需要它独占一行并居中，否则纯属多此一举
真正卡住人的往往不是“怎么写”，而是“为什么没生效”：父容器被上级 Flex/Gird 接管、form 宽度没约束、定位缺少 position: relative 上下文、或误把行内元素当块级处理。先查这四点，比重写 CSS 更省时间。
