父容器必须设 min-height: 100vh 才能确保 flex 垂直居中生效，因 height: 100% 依赖祖先高度，而 min-height: 100vh 可可靠撑满视口，避免缩放或内容少时登录框偏移。
父容器必须设 min-height: 100vh，否则垂直居中失效
很多人写了 display: flex、justify-content: center、align-items: center 却发现登录框没居中，第一反应是 CSS 写错了——其实八成是父容器高度塌陷了。height: 100% 不可靠，它依赖所有祖先元素都有显式高度；而 min-height: 100vh 是唯一能确保撑满视口的写法。
常见错误现象：
缩放至 125% 时登录框突然贴顶；或页面内容极少时整个登录框上浮到顶部。
-
html和body不需要设height: 100%，加了反而可能干扰子级 flex 行为 - 最稳妥的做法：给包裹
<form>的直接父<div>（比如<div id="login-wrapper">）设min-height: 100vh - 如果该父容器被上级
display: grid或display: flex管理，它的高度可能被压缩，此时需检查上级布局是否限制了其尺寸
position: absolute + transform 能用，但有隐藏风险
这套组合在固定宽高前提下确实能居中，但实际项目中容易翻车。它不像 flex 那样“自动适应”，而是靠计算偏移量，一旦缩放或字体渲染稍有偏差，中心点就会漂移 1–2px，尤其在 Windows + Chrome 下高频出现。
典型报错式表现：
100% 缩放时完美居中，切到 110% 或 150% 后登录框轻微右偏/下偏，反复刷新也不稳定。
立即学习“前端免费学习笔记（深入）”；
- 必须同时写全：
position: absolute、top: 50%、left: 50%、transform: translate(-50%, -50%) - 父容器必须有
position: relative（不能是static默认值），否则定位参考变成视口，易受滚动或 sticky 导航影响 - 若登录框内含动态内容（如错误提示展开），高度变化后不会重新触发居中逻辑，需 JS 监听重排或改用 flex
固定宽高值怎么选？别硬写 width: 400px 就完事
所谓“固定宽高”，是指你明确设了 width 和 height 像素值，但它不是孤立存在的——它和居中方式、响应式断点、box-sizing 共同起作用。盲目设死宽度，小屏会溢出，大屏留白难看。
- 推荐写法：
width: 400px+max-width: 100%+box-sizing: border-box，窄屏自动收缩不换行 - 高度慎用固定值：
height: 400px容易导致内容被截断（比如密码强度提示展开后撑高）；更稳妥的是让高度由内容自然撑开，只设min-height - 如果真要固定高度（例如设计稿强约束），务必搭配
overflow: auto，防止长错误信息被裁掉
margin: 0 auto 只能水平居中，且前提极苛刻
这个方法常被误认为“万能居中”，但它根本做不到垂直居中，而且对上下文极其敏感。很多团队还在用，只是因为历史代码没动过，不代表它适合新项目。
常见失败场景：<form> 加了 margin: 0 auto 却左贴边；或缩放后左右晃动。
- 必须满足三个条件才生效：元素是块级、非脱离文档流、父容器不能是
display: flex或display: grid - 必须显式设置
width（width: 100%不行，没剩余空间可分） - 一旦页面加了全局 flex 布局（比如
body { display: flex }），这个规则立刻被接管，margin: auto彻底失效
真正关键的不是“怎么写宽高”，而是“谁来决定高度基准”。flex 居中依赖父容器高度，absolute 居中依赖自身尺寸，margin 居中依赖父容器宽度。选哪种，得先想清楚你的登录框会不会随内容变高、要不要支持缩放、有没有滚动容器嵌套——这些细节比写几行 CSS 更影响最终效果。
