margin: 0 auto可使登录框水平居中，但须满足：块级元素、显式设置宽度（如max-width: 400px）、父容器非flex/grid、无float/absolute/inline-block干扰。
登录框水平居中用 margin: 0 auto，但必须设宽度
直接给 <form></form> 或包裹它的 <div class="login-box"> 加 <code>margin: 0 auto 最快，前提是它得是块级元素（默认就是），且有明确宽度。常见失效原因是写了 width: 100% —— 这样左右没剩余空间，auto 就分不出边距。建议用 max-width: 400px 配合 width: 100%，兼顾响应式和居中。
-
width必须是具体值（如400px）或百分比（如80%），不能是fit-content或auto - 父容器不能是
display: flex或display: grid，否则会覆盖margin: auto行为 - 别给登录框加
float、position: absolute或display: inline-block，这些都会让margin: 0 auto失效
全屏登录页要水平+垂直居中，优先用 Flex 布局
如果登录框需要在视口里“钉”在正中心（比如空页面只放一个登录框），display: flex 是最稳的选择。它不依赖子元素尺寸，也不用手算偏移，兼容性也够（IE10+ 支持）。
- 父容器（如
或外层<div class="login-wrapper">）加：<code>display: flex、justify-content: center、align-items: center - 父容器必须有高度支撑垂直居中，
min-height: 100vh是安全写法 -
<form></form>自身不用设width，但建议加max-width: 480px防止在大屏上过宽 - 注意：子元素的
margin: auto在 flex 容器里会被忽略，别混用 - 子元素（登录框）必须设：
position: absolute、left: 50%、top: 50%、transform: translate(-50%, -50%) - 父容器必须是非
static定位，通常加position: relative - 若父容器是
，记得先确保html, body { height: 100%; margin: 0; }，否则100vh可能不准 - 这个组合对宽高未知的登录框也有效，但滚动时定位可能漂移，慎用于长页面
- 让按钮居中：给它外面那层
<div>（或 <code><form></form>）加text-align: center - 让所有输入框水平居中：同上，但需确保
<input>没被设成display: block；如果已是块级，就得用 flex 或 grid 控制其父容器 -
text-align: center对 flex/grid 子项无效，别在 flex 容器里还写这个 - 垂直对齐输入框和标签，别只靠居中父容器，得用
display: flex或vertical-align: middle显式控制
实际生效与否，往往卡在布局上下文冲突上：比如父容器用了 flex 却还指望
用 position: absolute 居中时，transform: translate(-50%, -50%) 缺一不可
当登录框需要脱离文档流（比如浮在遮罩层上），position: absolute 是合理选择，但只写 left: 50% 和 top: 50% 会导致左上角对齐中心点，整个框偏右下——这是新手最常踩的坑。
表单内部元素（按钮、输入框）单独居中容易误判类型
给 <button></button> 或 <input> 直接加 margin: 0 auto 没用，因为它们默认是行内元素（或行内块），不响应块级外边距。真正起作用的是控制它们的父容器。
margin: auto 生效，或者给行内元素套了块级居中逻辑。浏览器渲染时认的是规则链，不是你“觉得应该居中”。
