最可靠方案是 display: flex + align-items: center，但父容器必须设 min-height: 100vh；绝对定位子元素、硬调 margin/top、浮动混搭会使其失效；ie9–10 可用 absolute + transform 回退。
登录框在页面中垂直居中，最可靠、最现代的方案是用 display: flex + align-items: center，但必须确保父容器有明确高度支撑 —— 否则它只会“居中”在 0 高度里，视觉上毫无效果。
父容器必须设 min-height: 100vh
很多页面一写就失效，根本原因不是 flex 写错了，而是父容器（比如 或外层 <div>）没撑开高度。浏览器默认 <code>body 高度由内容决定，不是视口高度。
-
html, body { margin: 0; min-height: 100vh; }是安全起点，min-height比height更稳妥，防止内容超长时被截断 - 如果登录框包在某个
<div class="login-wrapper"> 里，那这个 div 才是 flex 容器，它自己就得有 <code>min-height: 100vh - 不要只给
body设height: 100vh，IE 和部分移动端 Safari 会把地址栏高度算进vh，导致滚动条或错位 - 如果你的登录表单用了
position: absolute，哪怕父容器是 flex，align-items也起不了作用 - 子元素设置了
margin-top或top等硬调值，会覆盖 flex 的居中逻辑 - 子元素是
display: block且没有固定高度时，flex 仍能居中；但如果内部用了float或inline-block混搭，可能触发 BFC 异常，建议统一用 flex 子项布局 - 父容器需设
position: relative或position: fixed - 登录框加
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - 注意：若登录框宽高动态变化（比如响应式），
transform依然有效；但负 margin（如margin: -200px 0 0 -200px）会立刻失效 - IE9 不支持
transform，此时只能用display: table-cell+vertical-align: middle，但需整个登录区域设为 table 布局，语义性差，仅作兜底
align-items: center 失效的典型场景
它只控制交叉轴（默认是垂直方向）对齐，但前提是子元素不能是绝对定位，也不能有 position: absolute —— flex 对绝对定位子项完全不生效。
兼容老浏览器时的 fallback 方案
当项目必须支持 IE9–IE10，flex 不可用，可退回到 position: absolute + transform 组合，它比负 margin 更安全（不用知道子元素具体尺寸）。
真正容易被忽略的是：居中行为依赖于渲染上下文的高度计算。哪怕 CSS 写得再标准，只要父容器高度塌陷（比如子元素浮动未清除、或 flex 子项设了 align-self: flex-start 覆盖全局设置），垂直居中就会静默失败 —— 这时候查 computed height 比反复改 align-items 更有效。
