最稳方案是display: flex+min-height: 100vh，因跨浏览器兼容性好、无需js或hack；margin: 0 auto易失效主因是父容器非常规流或高度塌陷，且需明确宽度。
用 display: flex + min-height: 100vh 是目前跨浏览器最稳的登录框居中方案，不需要 hack、不依赖 JS、Chrome/Firefox/Safari/Edge（包括旧版 Edge 18）均原生支持。
为什么 margin: 0 auto 在 Safari 或旧版 Edge 里经常失效
这个写法本身没问题，但它的生效前提是：父容器必须是常规文档流、不能是 flex 或 grid 容器，且子元素必须有明确宽度（width 或 max-width）。问题常出在：
- Safari 对
height: 100%的祖先链继承更严格，如果漏了某一层的高度声明，margin: 0 auto就会因父容器高度塌陷而“看起来没动” - 旧版 Edge（≤18）不支持
min-height: 100vh在某些嵌套场景下的计算，但它对display: flex的支持是完整的——所以只要把flex容器设在body或顶层div上，就绕开了这个问题 - 部分国产双内核浏览器（如 360、QQ 浏览器）在“兼容模式”下会降级渲染，
margin: 0 auto可能被当作 IE6 行为处理，导致左右外边距不均
justify-content 和 align-items 在 Firefox 里偏移 1px 怎么办
这不是 bug，而是 Firefox 对 subpixel 渲染和 border-box 计算的细微差异。当登录框含 border 或 outline，且父容器用了 box-sizing: border-box 但子元素没统一时，Firefox 会把边框像素计入布局，造成视觉偏移。解决方法很简单：
- 给所有表单控件（
input、button、select）统一加box-sizing: border-box - 避免只给
form设border，而内部控件用默认box-sizing: content-box - 如果用了
outline: none去焦点边框，务必补上border，否则 Firefox 下 focus 状态可能触发重排抖动
IE11 必须兼容？别用 flex，改用 display: table 回退方案
IE11 不支持 align-items: center 在 min-height: 100vh 容器上的垂直居中，但支持 display: table-cell 的 vertical-align: middle。这不是妥协，而是精准降级：
- 外层容器设
display: table; width: 100%; min-height: 100vh - 中间包裹层设
display: table-cell; vertical-align: middle; text-align: center - 登录框自身设
inline-block或保持block并加margin: 0 auto - 注意：IE11 不支持
vh单位在某些嵌套 context 下的计算，所以min-height: 100vh要写在table容器上，不能只写在table-cell上
真正容易被忽略的是 viewport 和字体渲染差异：同一套 flex 居中代码，在 Chrome 里居中，在 Safari 里略偏下，大概率是因为 Safari 默认禁用字体平滑（-webkit-font-smoothing: none），导致行高微调影响 align-items: center 的基线判断。这种偏差不会报错，但肉眼可见——测试时得真机连 Safari 开发者工具看 computed styles，不能只信模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
