用 display: flex + min-height: 100vh 是最可靠、最平滑的登录框居中方案，无需 js，天然支持动画；margin: 0 auto 仅水平居中且需设宽，flex 居中必须配 min-height: 100vh 才保证视口垂直居中，transition 应作用于 opacity 和 transform 而非 display 或 visibility。
用 display: flex + min-height: 100vh 是最可靠、最平滑的方案，不需要 JS 计算，不依赖元素宽高，且天然支持动画过渡。
为什么不用 margin: 0 auto 单独做登录框居中
它只能水平居中，垂直方向完全没作用；如果硬要靠 padding-top 或 position: relative 模拟垂直居中，会受内容高度影响，滚动时位置漂移，响应式下容易错位。常见错误现象是：小屏幕里登录框被顶到视口外、或者随页面内容增长而“上浮”。
- 必须设
width或max-width，否则margin: 0 auto失效 - 父容器若为
flex或grid，该写法会被覆盖 - 无法应对“登录框需始终在视口中心，哪怕页面内容很短”这一典型需求
flex 居中必须配 min-height: 100vh
只写 display: flex; justify-content: center; align-items: center 不够——如果父容器（比如 或外层 <div>）没有足够高度，<code>align-items: center 就找不到垂直参考基准，结果就是登录框贴着顶部或内容区中间，而非视口正中。
- 推荐直接给包裹登录框的最外层容器加
min-height: 100vh，不是height: 100vh（后者会截断长页面） - 若父容器是
，需确保html, body { height: 100%; margin: 0; }，否则100vh在部分浏览器里可能计算异常 -
align-items: center对未知高度的登录框也有效，比 JS 动态算top值更稳定
加 transition 实现“平滑”效果的关键点
所谓平滑，本质是让登录框入场/隐藏时有渐变过程。但注意：display: none 无法过渡，opacity 和 transform 才是可动画属性。
- 给登录框本身加
transition: opacity 0.3s ease, transform 0.3s ease - 显示时用
opacity: 1; transform: translateY(0)，隐藏时用opacity: 0; transform: translateY(-10px)（避免突然消失感） - 别对
visibility或display做 transition——它们不触发重绘，过渡无效 - 如果登录框由 JS 控制显隐，确保 class 切换后 DOM 已就绪再触发动画（例如用
requestAnimationFrame包一层）
真正容易被忽略的是：平滑 ≠ 加了 transition 就完事。如果登录框初始状态是 opacity: 0 但未设 pointer-events: none，用户可能在动画中途误点；如果父容器用了 overflow: hidden，transform 移动可能被裁剪。这些细节比居中方式本身更容易破坏体验。
