用 display: flex 实现登录框居中是最稳的解法，需父容器设 min-height: 100vh 和 align-items: center；margin: 0 auto 易失效因依赖块级、定宽、非Flex父容器等硬性条件。
用 display: flex 实现登录框居中是最稳的解法，其他方式要么失效频繁，要么依赖太多前提条件。
为什么 margin: 0 auto 经常不生效
它只管水平居中，且必须同时满足三个硬性条件：登录框得是块级元素、有明确的 width 或 max-width（width: 100% 不行）、父容器不能是 display: flex 或 display: grid。
- 写了
margin: 0 auto却左贴边？大概率是忘了设max-width，或父容器用了 Flex 布局接管了外边距行为 - 加了
width: 400px但在小屏上溢出？换成max-width: 400px; width: 100%更安全 - 按钮或输入框在登录框里看起来没居中？不是它们的问题，而是
box-sizing默认值导致 padding/border 算在宽度外，统一加box-sizing: border-box
display: flex 居中必须配 min-height: 100vh
align-items: center 要起作用，父容器得有高度可分配。只写 height: 100% 很容易失效，因为它的百分比依赖祖先高度；而 min-height: 100vh 直接锚定视口，不依赖上下文。
- 父容器可以是
<body>，也可以是包裹<form>的<div class="login-wrapper"> - 别在登录框自身写
height，让它由内容自然撑开；但建议加max-width: 480px防大屏过宽 - 如果页面后续要加 header/footer，
min-height: 100vh比height: 100vh更容错——内容多时不会被截断
position: absolute + transform 的适用边界
仅在登录框必须脱离文档流时才用，比如浮在遮罩层 <div class="overlay"> 上。此时 left: 50%; top: 50% 只是把左上角钉到中心，必须补 transform: translate(-50%, -50%) 才算真正居中。
立即学习“前端免费学习笔记（深入）”；
- 父容器（遮罩层）必须设
position: relative，否则定位参考是<html>根元素，滚动即偏移 - 缩放至 125% 或 150% 时，该方案可能出现 1–2px 偏移，因字体/边框渲染非线性，Flex 更稳定
- 不要在普通登录页用这个方案——它牺牲可访问性，且增加 z-index 管理成本
真正卡住人的从来不是“怎么写”，而是“为什么没生效”：父容器被上级 Flex 接管、box-sizing 混乱、min-height 写成 height、viewport 元标签漏掉……这些细节比代码本身更值得先查。
