flex居中最可靠，因不依赖子元素尺寸、无需计算、响应式稳定；margin: auto垂直无效；绝对定位需配合transform；grid的place-items: center更简洁。
直接用 display: flex + justify-content: center + align-items: center，99% 的登录页场景都够用，不用算尺寸、不依赖子元素宽高、响应式也稳。
Flex 居中为什么比 margin: auto 更可靠
很多人试过给 .login-box 写 margin: 0 auto，结果只水平居中、垂直没反应——因为 margin: auto 对垂直方向无效，除非父容器是 display: table-cell 或绝对定位+margin: auto（后者还要定宽高）。而 Flex 不挑元素类型：
-
.login-box是div、form、甚至span（设display: block后）都能居中 - 父容器加
min-height: 100vh就能撑满视口，滚动时位置不变 - 不需要提前知道
.login-box的宽高，改个max-width: 400px就能适配小屏 - 副作用要注意：开启
flex后，子元素的float、vertical-align和部分margin行为会失效
绝对定位 + transform 适合模态登录框
如果登录框要脱离文档流（比如点击按钮弹出、带遮罩层），就得用 position: absolute。只写 left: 50%; top: 50% 会让左上角落在中心，必须补上 transform: translate(-50%, -50%)：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 父容器必须设
position: relative，否则top: 50%会相对于视口计算，滚动时偏移 -
transform基于自身尺寸，比写死margin-top: -200px安全得多 - IE9+ 原生支持，但旧版 Safari 需加
-webkit-transform前缀 - 常见错误：漏掉
position: relative在父级，或只写translateX(-50%)忘了 Y 轴
Grid 居中一行代码搞定
现代项目里，如果兼容性允许（Chrome 66+、Firefox 63+、Safari 16.4+），display: grid; place-items: center 比 Flex 还省事：
-
place-items: center是align-items: center和justify-items: center的简写，对单个子元素效果等同于 Flex 的两个属性组合 - 不需要额外设
min-height，grid自动撑开容器 - 和 Flex 一样不依赖子元素尺寸，但对多子元素的对齐控制更细（比如
place-self: end单独调某个） - 注意：如果父容器已有
display: flex或display: grid，再套一层会覆盖原有布局逻辑
真正容易被忽略的是父容器的“上下文”：text-align、margin: auto 在 flex/grid 容器内部基本失效；而绝对定位方案里，漏掉父级 position: relative 或写错 transform 的参数顺序，都会让登录框飘到页面外边去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
