登录框自动居中需据场景选方案：margin: 0 auto仅水平居中且须块级、有明确宽度、父容器非flex/grid；flex布局用justify-content和align-items配合min-height: 100vh可水平垂直居中；absolute+transform适用于脱离文档流的遮罩层，但父容器须设position: relative。
登录框自动居中，关键不是“加一个样式就完事”，而是选对布局上下文——margin: 0 auto只管水平，flex能同时控水平+垂直，position: absolute+transform适合遮罩层等脱离文档流场景。用错前提，样式写了也白写。
用 margin: 0 auto 实现水平居中（最常用但有硬性条件）
这个方案只解决水平居中，且必须满足三个条件：元素是块级、有明确宽度、父容器不能是 flex 或 grid。
-
<form></form>默认就是块级，不用改display - 必须设
width或max-width（比如max-width: 480px），不能是width: 100%—— 那样没剩余空间可分，auto就失效 - 父容器（比如
或外层<div>）不能有 <code>display: flex或display: grid，否则会覆盖margin: auto行为 - 别给
<form></form>加float或position: absolute，这些会让margin: 0 auto完全不生效 - 父容器（如
或一个包裹<form></form>的<div>）加：<code>display: flex+justify-content: center+align-items: center - 父容器必须有高度支撑垂直居中，
min-height: 100vh是最常用写法 -
<form></form>自身不用设width，但建议加max-width（如max-width: 400px）防过宽 - 注意副作用：父容器变成
flex后，子元素的float、vertical-align和传统margin对齐全部失效 - 子元素（
<form></form>或其父<div class="login-box">）设：<code>position: absolute+left: 50%+top: 50%+transform: translate(-50%, -50%) - 父容器（如遮罩层
<div class="overlay">）必须设 <code>position: relative（或absolute/fixed），否则top/left会相对于视口计算 -
transform: translate(-50%, -50%)是关键补丁，把自身宽高一半“挪回来”，哪怕宽高未知也有效 - 滚动时要注意：若父容器非
fixed，滚动后定位可能偏移；fixed定位更稳，但需额外处理键盘弹出（移动端） - 让按钮居中：给它的直接父容器（比如一个
<div> 包裹 <code><button></button>）设text-align: center - 让所有输入框和标签水平居中：在
<form></form>上设text-align: center，但注意这会影响所有行内内容（包括<label></label>文字） - 若需精确控制
<label></label>和<input>的垂直对齐，得用vertical-align或把它们都包进一个flex子容器里
用 display: flex 实现水平+垂直居中（推荐用于全屏登录页）
这是现代项目里最省心的方案，尤其当你希望登录框在视口里稳稳居中（比如无滚动条的登录页），它不依赖子元素尺寸，也不用算像素。
用 position: absolute + transform 居中（适合模态框/遮罩层）
当登录框需要盖在页面内容之上（比如点击按钮弹出），就必须脱离文档流，这时 absolute 是合理选择，但只靠 left: 50% + top: 50% 会偏右下角——因为定位基准是左上角。
为什么表单里的按钮或输入框还是靠左？
因为 margin: 0 auto 和 flex 居中作用的是整个表单容器，不是内部的 <input> 或 <button></button>。它们默认是行内级元素，单独加 margin: 0 auto 没用。
真正容易被忽略的点是：居中行为高度依赖父容器的定位上下文和显示模式。同一个 margin: 0 auto，在 body 里生效，在 flex 容器里就彻底沉默；transform: translate() 看似万能，但缺了 position: relative 的父容器，它就直接飞到视口中心去了。写之前，先看一眼父元素的 display 和 position 是什么。
