登录框居中需根据定位方式和父容器约束选择方案：margin: 0 auto需设width/max-width且父容器不能是flex/grid；flex布局需父容器min-height: 100vh；absolute+transform需父容器position: relative。
登录框居中不是“加个样式就行”，而是取决于它在页面中的定位方式和父容器约束。用错方法会导致偏移、响应失效或滚动错位。
用 margin: 0 auto 水平居中时，必须设 width 或 max-width
这是最常用也最容易翻车的方式。表单默认是块级元素，但margin: 0 auto只在有明确宽度时才生效。
- 错误写法：
.login-form { margin: 0 auto; }—— 没设宽度，浏览器认为它要占满父容器，auto 就没空间可分 - 正确写法：
.login-form { width: 400px; margin: 0 auto; }或更推荐max-width: 480px; margin: 0 auto;（兼顾小屏） - 注意：父容器不能是
display: flex或display: grid，否则会覆盖margin: auto行为 - 别给表单加
float或position: absolute，这些会让margin: 0 auto完全失效
用 Flex 布局同时水平+垂直居中，父容器需带高度
适合全屏登录页或模态弹窗这类需要“视口级居中”的场景，代码简洁且不依赖尺寸。
- 关键三行：
display: flex+justify-content: center+align-items: center - 父容器（比如
或一个包裹<form></form>的<div>）必须有高度支撑垂直居中，<code>min-height: 100vh是最稳妥的写法 -
<form></form>自身不用设width，但建议加max-width防止在大屏上过宽 - IE10+ 支持，IE9 及更早版本不支持 —— 如果还要兼容，得降级用绝对定位
- 只写
left: 50%; top: 50%是错的 —— 这是把元素左上角钉在中心点，结果整个框偏右下 - 必须加
transform: translate(-50%, -50%)，把自身宽高一半“挪回来” - 父容器得设
position: relative（或其他非static值），否则定位参考是视口，不是你预期的包裹层 - 这个组合对宽高未知的表单也有效，但要注意：滚动时若父容器没固定定位，框可能随页面滚动而错位
- 想让按钮居中：给它的直接父容器（比如一个
<div>）设 <code>text-align: center - 想让所有输入框文字居中：在
input上单独加text-align: center，不是在父容器上 - 如果用了 Flex 布局做整体居中，子项的
margin: auto会被忽略 —— Flex 规则优先级更高
用 position: absolute + transform 居中，必须配 translate(-50%, -50%)
适用于登录框需要脱离文档流（比如遮罩层上的浮层），但容易漏掉关键补丁。
别混淆文本居中和块居中
表单里常见的按钮、<label></label>、<input> 默认是行内或行内块，它们不受 margin: 0 auto 影响。
真正麻烦的不是怎么写，而是忘记检查父容器的 display 类型、高度是否撑开、定位上下文是否存在。一个没设 min-height: 100vh 的 Flex 容器，或者一个被 position: fixed 覆盖的父层，都能让居中瞬间失效。
