最稳方案是父容器设display: flex、justify-content: center、align-items: center和min-height: 100vh；缺一不可，否则因无高度参考或子项脱离文档流导致居中失效。
用 display: flex 实现登录框水平+垂直居中最稳
现代项目里，display: flex 是登录框居中的首选方案，它不依赖元素尺寸，也不用算偏移量，浏览器原生支持且容错率高。父容器加 justify-content: center 和 align-items: center 就能同时搞定两个方向。
常见错误现象：align-items: center 没生效，页面看起来只水平居中了——大概率是父容器没设高度，或者被子元素撑开后失去“参考高度”。
- 父容器必须有明确高度支撑垂直居中，
min-height: 100vh是最常用也最可靠的写法 -
<form></form>自身不用设width，但建议加max-width: 480px防止在大屏上过宽 - 别给父容器同时设
display: flex和margin: 0 auto，后者会被前者覆盖 - 如果登录框内还有浮动或绝对定位子项，它们可能脱离 flex 流，需单独处理对齐
用 position: absolute + transform 居中适合遮罩层场景
当登录框需要浮在全屏遮罩层（z-index 较高）上时，position: absolute 更合适，但只写 left: 50% 和 top: 50% 会把左上角顶到中心，导致整体偏右下。
关键补丁就是 transform: translate(-50%, -50%)，它把元素自身宽高的一半“挪回来”，从而实现真居中。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有定位上下文，即
position: relative、absolute或fixed，否则left/top会相对于视口定位 - 不要漏掉
transform，否则视觉偏差明显，尤其在不同分辨率下更难调 - 该方案对宽高未知的表单也有效，但要注意滚动时定位是否稳定（
position: fixed更稳妥） - 可访问性略弱于 flex，屏幕阅读器可能因脱离文档流而跳过顺序
margin: 0 auto 只能水平居中，且极易踩坑
很多新手以为给 <form></form> 加 margin: 0 auto 就能居中，结果毫无反应——问题几乎都出在宽度和显示模式上。
这个方法只控制左右外边距均分，前提是元素为块级、有明确宽度、且未脱离普通文档流。
- 必须设
width或max-width，width: 100%会让auto失效（没剩余空间可分） -
<form></form>默认是块级，但若被 JS 动态加了display: inline-block或float，margin: 0 auto就失效 - 父容器不能是
display: flex或display: grid，否则会接管子项对齐逻辑 - 它完全不管垂直方向，想上下居中还得额外处理（比如 padding 或 line-height，不可靠）
别混淆文本居中和块居中
text-align: center 对登录框本身无效，它只影响内部行内内容（如按钮文字、<label></label> 文本），不是让整个 <form></form> 移动位置。
常见错误：给 <form></form> 加 text-align: center 后发现输入框没动，就怀疑 CSS 没加载——其实是用错了对象。
- 让按钮居中：给它的直接父容器（比如一个
<div>）设 <code>text-align: center - 让所有输入框标签水平对齐：可以统一用
display: flex+flex-direction: column控制子项，比靠text-align更可控 -
vertical-align对<input>这类替换元素效果有限，别指望靠它垂直对齐表单项
真正难的不是选哪种方法，而是理解每种方案生效的前提条件。比如 flex 要求父容器有高度，absolute 要求定位上下文存在，margin: 0 auto 要求宽度明确——漏掉任意一个，都会让“居中”变成“看起来差不多”。
