Flex布局是目前最稳定的登录框居中方案：父容器设display: flex、justify-content: center、align-items: center并min-height: 100vh；IE11需额外加text-align: center和transform: translateY(-50%)兼容；Grid方案需确保无干扰margin/padding。
用 Flex 布局让登录框真正居中，不是“看起来居中”
绝对定位 + top: 50% + transform: translateY(-50%) 这套组合容易漏掉水平居中，或在视口缩放时偏移。Flex 是目前最稳的方案，父容器设为 display: flex，再用两个对齐属性就能同时控制垂直和水平。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把登录表单（比如
<form class="login-box">）包进一个全屏高度的容器，如<div class="login-wrapper"> - 给
.login-wrapper加上：display: flex;<br>justify-content: center;<br>align-items: center;<br>min-height: 100vh;<br>margin: 0;
- 确保
.login-box没有意外的margin: auto或浮动，否则会干扰 Flex 对齐 - 如果页面有固定头部（header），改用
min-height: calc(100vh - 64px)并补上padding-top: 64px，避免被遮挡
IE11 下 flex 居中失效？加个兼容写法
IE11 对 align-items: center 在某些嵌套结构下表现异常，尤其是子元素设置了 display: inline-block 或未定义宽高时。这时候不能只靠 Flex。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
.login-box显式设置width和max-width（比如width: 320px），IE11 对无宽元素的居中计算不准 - 在
.login-wrapper上额外加两条老式居中声明：text-align: center;<br>position: relative;
- 再给
.login-box加：position: relative;<br>top: 50%;<br>transform: translateY(-50%);
—— 注意这里只用translateY，配合text-align: center实现水平居中，避开 IE 的justify-contentbug
用 CSS Grid 替代 Flex？简单但要注意显式轨道
Grid 居中代码更少，但新手常忽略：不定义行/列轨道时，place-items: center 可能不生效，尤其在嵌套较深或重置了 display 的场景下。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 直接给
.login-wrapper设置：display: grid;<br>place-items: center;<br>min-height: 100vh;
- 如果登录框仍没居中，大概率是父级（比如
<body>）有margin或padding，加一句body { margin: 0; } - Grid 在 Safari 旧版本（place-items 支持不完整，可降级为：
grid-template-rows: 1fr;<br>grid-template-columns: 1fr;
再配justify-items: center; align-items: center;
为什么 margin: auto 在登录框上不管用？
margin: auto 只对「块级且宽度明确」的元素生效。登录框如果没设 width，浏览器按内容撑开，auto 就失去参照；如果父容器是 block 但高度不定，垂直方向也完全无效。
常见错误现象：
- 登录框贴着顶部，
margin: auto完全没反应 → 父容器没设height或min-height - 左右居中了，但上下没动 → 垂直方向的
margin: auto对非绝对定位的块级元素无效 - 用了
display: table-cell配vertical-align: middle，结果整个页面布局错乱 → 这种方式会强制改变文档流，现在基本该淘汰了
真要硬用 margin: auto，必须同时满足：父容器 display: block + height: 100vh，子元素 display: block + width: 320px + margin: auto + position: relative + top: 50% + transform: translateY(-50%) —— 已经比 Flex 多写三行，没必要。
真正省事的关键，是别让居中逻辑依赖登录框自身的尺寸变化；固定宽高、用 Flex/Grid 控制父容器，比反复调 margin 和 top 更可靠。浏览器渲染时，Flex/Grid 的居中是 layout 阶段就确定的，而 transform 是 paint 阶段才生效，后者在低性能设备上偶尔会闪一下。
