推荐用Flexbox实现：父容器设display: flex、justify-content: center和align-items: center，并配min-height: 100dvh确保适配安全区；避免只写justify-content或遗漏高度声明，也勿混用flex-direction: column。
用 Flexbox 实现登录框垂直水平居中（推荐）
现代浏览器下最可靠、代码最少的方式就是用 display: flex。父容器设为 flex，再用 justify-content 和 align-items 两行搞定，不用计算高度、不依赖 JS。
常见错误是只加了 justify-content: center 却漏掉 align-items: center，结果只水平居中、上下还是贴顶。
- 父容器必须有明确高度（比如
height: 100vh），否则 flex 无法判断“居中到哪” - 登录框本身不需要设
margin: auto或绝对定位 - 避免给父容器同时设
flex-direction: column，否则justify-content行为会变（它控制主轴，而 column 下主轴是纵向）
<div class="login-container">
<form class="login-box">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
</form>
</div>
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-box {
padding: 24px;
border: 1px solid #ddd;
border-radius: 4px;
}
用绝对定位 + transform 居中（兼容旧版 Chrome/Safari）
当项目需支持 iOS Safari 9 或 Android Browser 4.4 等老环境时，flex 可能有渲染 bug，这时回退到 position: absolute 更稳。
关键点在于：不能只靠 top: 50%，因为这会让元素顶部落到视口中间，得用 transform: translateY(-50%) 把自己拉回一半高度。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative或position: absolute，否则子元素的absolute会相对于 body 定位 -
left: 50%+transform: translateX(-50%)同理用于水平居中 - 如果登录框宽高不固定（比如内容动态增减），
transform仍有效；但margin-top: -XXpx这种写死负边距的方式会失效
.login-container {
position: relative;
height: 100vh;
}
.login-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
为什么不要用 table-cell 或 line-height 居中？
display: table-cell + vertical-align: middle 看似能用，但实际问题很多：父容器需设 display: table，且整个结构语义错乱；更麻烦的是，它对 padding、border、字体大小变化极其敏感，稍一改动就偏移。
line-height 方案只适用于单行纯文本，登录框含 input 表单控件，根本不可控——不同浏览器对表单元素的基线对齐逻辑不一致，Chrome 和 Firefox 渲染可能差 2–3px。
- 这两种方式在响应式场景下基本不可维护
- 调试时经常发现居中“看起来差不多”，但放大 200% 或换设备就露馅
- 它们绕开了标准文档流，后续加动画、z-index 或与其他布局混合时容易冲突
移动端适配要注意的细节
在 iPhone X 及更新机型上，100vh 会包含底部安全区（home indicator 区域），导致登录框被顶到状态栏下面。这不是居中失效，而是视口高度算多了。
解决方案是改用 100dvh（dynamic viewport height），它会自动剔除安全区。目前 Chrome 100+、Safari 16.4+、Firefox 114+ 已支持。
- 不支持
dvh的老浏览器可降级为100vh，影响有限 - 慎用
env(safe-area-inset-bottom)手动减去安全区，因为登录框通常不需要留出底部空白 - 如果登录框内有
input，iOS 上聚焦时键盘弹出会触发 viewport 缩放，此时100dvh会自动重算，比100vh更稳
真正难的不是“怎么居中”，而是居中后在各种屏幕尺寸、输入法弹起、横竖屏切换时不跳动、不遮挡、不缩放。Flex + dvh 组合目前是最接近“写一次、到处稳”的解法。
