登录框水平居中推荐用margin: 0 auto（需设width/max-width且父容器非flex/grid）；全屏居中用flex布局（父设display: flex、justify-content/align-items: center、min-height: 100vh）；遮罩层居中用position: absolute+transform: translate(-50%,-50%)（父需relative）。
用 margin: 0 auto 实现登录框水平居中
只要登录框是块级元素（<form> 默认就是），给它设一个明确的 width 或 max-width，再加 margin: 0 auto 就能稳稳水平居中。常见错误是写 width: 100%——这会让左右没空间可分，auto 失效。
推荐用 max-width: 480px，兼顾响应式和居中；父容器不能是 display: flex 或 display: grid，否则会覆盖 margin: auto 行为；别给登录框加 float 或 position: absolute，这些会让 margin: auto 完全失效。
用 Flex 布局实现水平+垂直居中
当登录框需要在视口里真正“上下左右都居中”（比如全屏登录页或模态弹窗），display: flex 是最省心的选择。它不依赖子元素尺寸，也不用算像素。
父容器（比如 <body> 或一个包裹 <form> 的 <div>）需设置：display: flexjustify-content: centeralign-items: centermin-height: 100vh（必须有高度支撑垂直居中）
立即学习“前端免费学习笔记（深入）”；
<form> 自身不用设 width，但建议加 max-width 防止过宽；如果父容器已有其他布局逻辑（如浮动、绝对定位），Flex 可能被干扰，要先清理。
用 position: absolute + transform 居中（适合遮罩层）
当登录框要脱离文档流（比如浮在半透明遮罩层上），position: absolute 是合理选择。但只写 left: 50% 和 top: 50% 会导致偏右下角——因为定位基准是左上角，不是中心点。
必须满足三个条件：
- 登录框设 position: absolute
- 父容器设 position: relative（或 absolute/fixed），否则定位参考是视口
- 登录框加 transform: translate(-50%, -50%) 把自身宽高一半“挪回来”
这个组合对宽高未知的登录框也有效，但要注意滚动时的定位稳定性；如果页面内容高度小于视口，min-height: 100vh 要加在父容器上，否则可能撑不满。
text-align: center 不是用来居中登录框本身的
新手常误以为给 <form> 加 text-align: center 就能让整个表单居中——其实它只影响内部行内/行内块元素（比如 <label>、<input>、按钮文字）的水平对齐，对块级容器本身无效。
让按钮居中：给它的直接父容器（比如包裹 <button> 的 <div>）设 text-align: center
让输入框内文字居中：给 <input> 加 text-align: center，不是给父容器
若需精确控制 <label> 和 <input> 的垂直对齐，得用 vertical-align 或 Flex 子项对齐，不能只靠居中父容器
