用display: flex实现登录框垂直+水平居中最稳：父容器设display: flex、justify-content: center、align-items: center和min-height: 100vh，子元素无需固定宽高，且兼容响应式变化。
用 display: flex 实现登录框垂直+水平居中最稳
现代项目里，display: flex + justify-content: center + align-items: center 是首选，它不依赖子元素宽高，也不怕响应式变化。
关键点在于父容器必须有明确高度支撑垂直居中：
-
html, body { height: 100%; margin: 0; }是基础，否则min-height: 100vh可能失效 - 包裹
<form>的外层<div class="login-container">必须设min-height: 100vh（不是height: 100vh，避免内容超长时被截） -
<form>自身不用设width，但建议加max-width: 400px防止在大屏上过宽 - 如果父容器用了
display: grid或其他 flex 容器，text-align: center和margin: 0 auto就不起作用了
绝对定位 + transform 适合模态弹窗类登录框
当登录框需要脱离文档流（比如点击按钮后弹出、带遮罩层），position: absolute 配合 transform: translate(-50%, -50%) 更合适。
常见错误是只写 left: 50%; top: 50%，结果元素左上角卡在中心，下半部分溢出视口：
立即学习“前端免费学习笔记（深入）”；
- 父容器（如
<div class="modal">）必须设position: relative或position: fixed - 子元素（
<form>）设position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) - IE9+ 原生支持
transform，但旧版 Safari 要加-webkit-transform - 滚动页面时，
position: fixed才能保持居中不动；absolute会随页面滚动偏移
margin: 0 auto 只能水平居中，别指望它垂直居中
很多新手以为给 <form> 加 margin: 0 auto 就能上下左右都居中——不行。它只对块级、定宽、非脱离文档流的元素生效，且只影响水平方向。
要让它“看起来”垂直居中，得靠其他手段配合：
- 父容器必须有高度，比如
height: 100vh，再用padding-top: calc(50vh - 200px)（假设表单高 400px） - 或者套一层
<div>，用display: table-cell+vertical-align: middle，但语义差、兼容性弱，已不推荐 -
margin: auto在 flex 或 grid 容器里完全失效，别混用
表单内部元素对齐容易被忽略
登录框居中只是第一步，内部 <label>、<input>、<button> 的垂直对齐才是真实体验瓶颈。
比如复选框“记住密码”文字总偏低，提交按钮和输入框高度不一致：
-
<label>和<input>建议包在<div class="input-group">里，统一设display: flex; align-items: center - 避免用
line-height对齐多行文本，改用flex或grid -
<button>默认有默认 padding 和 border，和<input>高度不一致时，显式设height和box-sizing: border-box - 所有表单控件必须有
id和对应label for，否则可访问性不达标
实际最难处理的不是“怎么居中”，而是居中后在不同屏幕尺寸、不同浏览器缩放比例、不同 zoom 级别下是否依然稳定——flex + min-height: 100vh 组合目前仍是平衡兼容性、语义性和维护成本的最佳解。
