用 display: flex + justify-content + align-items 三行 css 实现登录框居中，父容器需设 min-height: 100vh；margin: 0 auto 无法垂直居中且在 flex/grid 父容器中失效；绝对定位需配合 transform: translate(-50%, -50%) 修正偏移。
直接用 display: flex + justify-content + align-items，父容器加 min-height: 100vh，三行 CSS 解决所有常见登录框居中问题。
为什么不用 margin: 0 auto 单独搞垂直居中
它只管水平，不管垂直；想靠它实现上下居中，必须配合 JS 算高度、或给父容器硬设 height，但页面内容高度常是动态的。更麻烦的是：一旦父容器用了 display: flex 或 display: grid，margin: 0 auto 就彻底失效——你调半天发现没反应，八成是这个原因。
-
margin: 0 auto仅对块级、非浮动、非绝对定位元素生效 - 它依赖“剩余水平空间”，但垂直方向没有对应机制
- 若父容器是
，默认高度由内容撑开，height: 100%不起作用，得写min-height: 100vh
flex 居中时父容器必须设 min-height: 100vh
否则 align-items: center 没有可用的垂直空间可对齐——它不是把子元素“拉”到屏幕中间，而是把子元素放在父容器交叉轴（垂直方向）的可用空间正中央。如果父容器高度是 auto，可用空间就是 0。
- 别写
height: 100%，除非你已确保所有祖先元素（html、body）都显式设了height: 100% -
min-height: 100vh更可靠，兼容滚动和内容增长 - 如果登录框要固定在视口内（比如遮罩层上），父容器需加
position: relative防止子元素脱出
绝对定位 + transform 的关键补丁不能漏
只写 left: 50%; top: 50% 会让元素左上角落在中心点，整个框偏右下。必须加 transform: translate(-50%, -50%) 把自身宽高的一半“挪回来”。这个组合对宽高未知的表单也有效，但要注意：
- 父容器必须有
position: relative（或absolute/fixed），否则定位参考是视口，容易被滚动影响 -
transform会创建新的层叠上下文，可能影响 z-index 行为 - 移动端键盘弹出时，
100vh在部分 iOS Safari 中会变小，导致定位偏移——此时flex方案更稳
真正容易被忽略的点是：居中行为受父容器显示模式支配，而不是子元素自己写了什么。哪怕你把 form 写得再标准，只要它的直接父容器是 display: grid 或 float: left，所有基于 margin: auto 或文本对齐的尝试都会静默失败。先看父容器，再动子元素——这是调试居中的第一原则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
