表单水平居中首选 margin: 0 auto（需设明确宽度），全屏居中推荐 flex + justify-content/align-items，绝对定位需配合 transform(-50%,-50%)；切勿混淆文本居中与块级居中。
用 margin: 0 auto 实现表单水平居中最直接
只要表单是块级元素（<form> 默认就是），给它设一个明确宽度（比如 max-width: 480px），再加 margin: 0 auto 就能稳稳水平居中。常见错误是忘了写宽度，或写了 width: 100%——后者没剩余空间可分，auto 就失效了。
注意这方法只对块级容器本身有效，不能让内部的 <input> 或 <button> 单独居中；父容器也不能是 display: flex 或 display: grid，否则会覆盖 margin: auto 行为。
推荐用 max-width 而非 width，兼顾响应式和居中稳定性。
用 Flex 布局同时水平+垂直居中
当登录框需要在视口里上下左右都居中（比如全屏登录页），display: flex + justify-content: center + align-items: center 是首选。它不依赖子元素尺寸，也不用算像素。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 父容器（如
<body>或外层<div>）必须设display: flex、justify-content: center、align-items: center - 父容器要有高度支撑垂直居中，
min-height: 100vh是常用写法 -
<form>自身不用设width，但建议加max-width防止过宽 - 别在
<form>上再加float或position: absolute，会破坏 Flex 对齐逻辑
用 position: absolute + transform 居中需严格配对
适合登录框要脱离文档流的场景（比如遮罩层上的弹窗）。但只写 left: 50% 和 top: 50% 会导致偏移——因为定位基准是左上角，不是中心点。
必须同时满足：
- 子元素（如登录容器
<div class="login-box">）设position: absolute、left: 50%、top: 50% - 父容器设
position: relative（或absolute/fixed），否则定位参考是视口 - 子元素必须加
transform: translate(-50%, -50%)，把自身宽高一半“挪回来”
这个组合对宽高未知的表单也有效，但要注意滚动时的定位稳定性，以及屏幕阅读器对脱离文档流内容的识别问题。
别把文本居中和块居中混用
<label>、<input>、按钮默认是行内或行内块元素，给它们单独加 margin: 0 auto 没用，因为行内元素不响应块级外边距。
正确做法：
- 让按钮居中：给它的直接父容器（比如包裹
<button>的<div>）设text-align: center - 让整个表单内的文字水平居中：在表单父容器上设
text-align: center，但注意这会影响所有行内内容（包括<label>和占位符） - 若需精确控制每个
<label>和<input>的垂直对齐，得用vertical-align或 Flex 子项对齐，不能只靠居中父容器
真正容易被忽略的是：居中不是单一动作，而是由元素类型、显示模式、父容器布局方式共同决定的。同一个 <form> 在不同上下文里，可能要用三种不同的 CSS 才能让它“看起来居中”。
