Flex居中首选方案是父容器设display: flex，配合justify-content: center和align-items: center，并用min-height: 100vh确保高度安全；IE11需回退至position: absolute + transform；响应式下须注意max-width、width百分比及iOS Safari中vh偏差问题。
用 Flex 布局居中，最稳也最省事
现代浏览器下，display: flex 是让登录框真正垂直+水平居中的首选。它不依赖固定宽高，也不受父容器 padding 干扰，比 position: absolute + transform 更直观、更少出错。
关键点是把 body 或一个全屏容器设为 flex 容器，并设置主轴和交叉轴都居中：
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
注意：min-height: 100vh 比 height: 100vh 更安全，避免内容超长时登录框被截断；margin: 0 是为了消除浏览器默认 body 边距。
登录框本身别设 margin: auto 就完事了
很多人以为给登录框加 margin: auto 就能居中，其实它只在块级元素且宽度明确时才对水平方向生效，对垂直方向完全无效——除非父容器是 flex 或 grid。
立即学习“前端免费学习笔记（深入）”；
- 如果父容器不是 flex，
margin: auto不会让登录框垂直居中 - 如果登录框没设
width（比如width: 100%），margin: auto在水平方向也可能失效 - 真正起作用的是父容器的布局方式，不是子元素的 margin
IE11 兼容？改用 position: absolute + transform
如果必须支持 IE11，Flex 的 align-items: center 在某些旧版本里有渲染偏差，稳妥做法是退回到绝对定位方案：
body {
position: relative;
min-height: 100vh;
margin: 0;
}
.login-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
这个组合的关键在于：transform 是相对自身尺寸计算的，所以不需要知道登录框宽高；但要注意 login-box 不能是 position: fixed，否则会相对于视口而非 body 定位。
响应式下容易忽略的坑：小屏幕时登录框溢出
居中逻辑没问题，但登录框在手机上可能超出视口宽度或高度，导致左右/上下滑动，体验极差。
- 给
.login-box加max-width: 100%和width: 90%（而不是固定像素） - 用
padding替代margin控制内部留白，避免撑破容器 - 如果用了
transform: translate，确保内部表单控件没有min-width强制撑开 - 测试时真机横屏切换，
vh单位在 iOS Safari 中有时会把地址栏高度算进去，造成偏移
居中只是第一步，能否在各种设备上“不破相”，才是实际交付时最容易翻车的地方。
