必须同时设置display: flex、min-height: 100vh、justify-content: center和align-items: center，且父容器需有明确高度，否则align-items: center因交叉轴无参照长度而失效；margin: 0 auto仅水平居中且不适用于flex/grid容器或脱离文档流元素。
flex居中必须设min-height: 100vh
父容器没高度，align-items: center就失效——它不是“把子元素往上推”，而是按父容器可用垂直空间做等分对齐。只写height: 100%通常无效，因为body和html默认没显式高度，百分比会断链。直接上min-height: 100vh最可靠，确保有视口全高可撑开。
常见错误包括：
- 给
body加display: flex后，所有直系子元素（比如header、main）都变成flex item，意外接管了登录框的外边距行为 - 登录框包裹在
grid容器里，父容器的place-items或justify-content已生效，再加margin: 0 auto纯属冗余 -
form自身写了width: 100%，导致justify-content: center无剩余空间可分配
margin: 0 auto只能水平居中，且依赖三个硬条件
这方法根本不管垂直方向，想靠它“上下左右都居中”是误解。它只在块级、非脱离文档流、有明确宽度的前提下生效。
典型失败场景：
-
form没设width或max-width，只写了margin: 0 auto→ 浏览器无法计算左右空隙，保持左对齐 - 父容器用了
display: flex或display: grid→margin: auto被布局模型忽略，CSS规范明确定义为“不适用” -
form加了position: absolute或float: left→ 元素已脱离文档流，margin: auto失去作用对象
模态登录框必须用position: absolute + transform: translate(-50%, -50%)
遮罩层（.overlay）上浮的登录框不能依赖文档流，否则滚动时会错位。只写top: 50%; left: 50%会把左上角钉在中心点，必须用transform: translate(-50%, -50%)把自身中心对准坐标原点。
关键约束：
- 遮罩层（父容器）必须设
position: relative，否则top/left会相对于视口定位，页面滚动即偏移 - 登录框自身要同时声明
position: absolute、top: 50%、left: 50%、transform: translate(-50%, -50%)，缺一不可 - 别用负
margin替代transform：负值需预知宽高，响应式下极易错位；transform不触发重排，性能更稳
别在body上直接写display: flex
全局设body { display: flex }看似省事，但会强制所有子节点（包括script、noscript、第三方SDK插入的div）变成flex item，可能破坏原有结构或JS尺寸计算逻辑。错误日志如Uncaught TypeError: Cannot read property 'offsetWidth' of null常由此引发。
正确做法是包一层容器：
<div class="page-wrapper">
<header>...</header><main class="login-container"><form class="login-box">...</form>
</main>
</div>
然后只对.login-container设display: flex; justify-content: center; align-items: center; min-height: 100vh;——范围可控，不影响其他模块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
