最稳最简方案是display: flex配合justify-content和align-items居中，因无需预知宽高、不依赖margin负值、不冲突第三方组件，且min-height: 100vh比height: 100%更容错；ie11需加height: 100%补丁，safari旧版可用100dvh或js动态设高。
用 display: flex + justify-content/align-items 是最稳、最简、兼容性足够（IE11+）的方案，不用算 margin，不依赖固定宽高，也不需要 JS。
为什么不用 position: absolute + margin 负值
这种写法要求你提前知道登录框的宽高，比如 margin-top: -200px；一旦改了样式或用了响应式字体，数值就得重算。更麻烦的是：在缩放页面、高 DPI 屏幕或动态内容（比如密码错误提示展开）下，偏移量立刻失准。另外，html, body { height: 100% } 这类强制高度设置容易和第三方组件（如某些 UI 库或广告脚本）冲突，导致整个页面高度塌陷。
flex 居中只需三行 CSS
把登录框的父容器设为 flex 容器，并启用主轴和交叉轴居中即可：
.login-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 0;
}
-
min-height: 100vh比height: 100%更可靠——它不依赖父级高度是否被显式定义 - 子元素（即
.login-box）无需设置position、top或margin，宽高任意变都自动居中 - 如果登录框本身需要响应式（比如移动端变窄），直接加
max-width和width: 100%即可，flex 会自动重新对齐
遇到 Safari 旧版本或 IE11 怎么办
IE11 对 flex 的支持基本可用，但有个经典坑：align-items: center 在 min-height: 100vh 下偶尔失效。这时加一行 height: 100% 就能修复：
.login-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
height: 100%; /* IE11 补丁 */
}
- 不需要额外 wrapper div，也不用
table-cell那套 hack - Safari 10–12 对
vh有滚动条高度计算 bug，若页面可滚动，可改用100dvh（现代浏览器支持，iOS 16.4+） - 真要兼容 iOS Safari 10–15，且必须用
vh，可加 JS 动态设高度：el.style.minHeight = window.innerHeight + 'px'，但仅当 flex 方案彻底失效时才考虑
真正难的不是“怎么居中”，而是居中后内容在不同设备上是否依然可读、可点、可聚焦——比如小屏上输入框不能被虚拟键盘顶飞，大屏上盒子不能无限拉宽。这些细节比居中本身更消耗调试时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
