网页顶部出现大片空白，通常是因为使用 top: 50% + transform: translate(-50%, 50%) 垂直居中时，body 缺乏明确高度（如 height: 100vh），导致百分比计算失效，容器实际仍紧贴视口顶部。
网页顶部出现大片空白，通常是因为使用 `top: 50%` + `transform: translate(-50%, 50%)` 垂直居中时，`body` 缺乏明确高度（如 `height: 100vh`），导致百分比计算失效，容器实际仍紧贴视口顶部。
在 CSS 中，当对一个元素设置 position: absolute; top: 50% 时，浏览器会将其上边缘定位到其包含块高度的 50% 处。而默认情况下，
的高度由其内容撑开，并非占满整个视口——也就是说，若内容较少，body 高度可能远小于 100vh，此时 top: 50% 实际位移极小（甚至为 0），后续 transform: translate(-50%, 50%) 中的 50% 是相对于元素自身高度计算的，结果是向下偏移了容器自身高度的一半，反而造成“顶部留白”假象。✅ 正确做法是：
- 给 body 显式设置 height: 100vh，确保其高度等于视口高度；
- 同时将 transform 改为 translate(-50%, -50%)，使容器中心真正对齐视口中心。
以下是修复后的关键 CSS 片段：
body {
position: relative;
background-color: hsl(0, 0%, 95%);
height: 100vh; /* ✅ 关键：赋予 body 明确的视口高度 */
}
.container {
width: 58%;
max-width: 550px;
display: grid;
grid-template-columns: 1fr;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* ✅ 修正：第二个参数应为 -50%，而非 50% */
}⚠️ 注意事项：
- 不要依赖 * { margin: 0; padding: 0; } 就认为布局完全“重置”——它无法替代 body { height: 100vh } 对定位上下文的支撑作用；
标签并不存在，应使用 （HTML 规范标签），否则图片无法渲染，可能间接影响布局调试；
- 若未来需适配移动端或添加滚动内容，建议优先考虑更现代、语义化更强的居中方案，例如：
.container { display: grid; place-items: center; /* 简洁实现水平+垂直居中 */ min-height: 100vh; margin: 0; }这种方式无需绝对定位，兼容性良好（支持 Safari 15.4+、Chrome 87+、Firefox 73+），且天然避免高度计算陷阱。
总结：顶部空白本质是“定位基准缺失”问题。明确 body 高度 + 校准 transform 偏移方向，即可精准实现居中；进阶实践中，推荐用 place-items 或 flexbox 替代绝对定位，提升代码健壮性与可维护性。
