本文介绍如何利用 css grid 的 `place-items: center` 和 `grid-area: 1/1` 特性，让多个尺寸各异、层叠堆叠的 div 在容器中真正水平垂直居中，且响应式稳定，彻底解决 flexbox 在此场景下的失效问题。
在 Web 布局中，当需要将多个不同尺寸的
元素完全重叠并统一居中于视口中央（例如实现同心圆、层叠卡片、渐变遮罩等视觉效果）时，很多人会本能选择 Flexbox，并设置 justify-content: center; align-items: center。但正如实际开发中所遇——Flexbox 默认将所有子元素作为弹性项目沿主轴和交叉轴整体居中，其结果是：所有子元素的外边框矩形被共同居中，而非每个子元素独立以其自身中心点对齐到容器中心。更关键的是，一旦子元素设置了 position: absolute（如原例中 .frame { position: absolute }），它们就脱离了文档流，Flexbox 完全无法对其定位生效，导致只有第一个元素看似“居中”，其余均按绝对定位原始规则（如 top: 0; left: 0）偏移，造成错位。
✅ 正确解法是改用 CSS Grid，它天然支持多子元素共享同一网格区域并独立居中：
.container {
display: grid;
place-items: center; /* 等价于 justify-items: center; align-items: center; */
height: 100vh; /* 确保容器占满整个视口高度 */
width: 100vw; /* 可选：显式设宽，避免潜在宽度塌陷 */
background-color: rgb(130, 130, 130);
border: 3px solid green;
box-sizing: border-box;
}
.frame {
grid-area: 1 / 1; /* 所有 .frame 占据第 1 行第 1 列的同一网格区域 */
border: 3px solid black;
box-sizing: border-box;
}
同时务必注意全局样式清理：
body {
margin: 0; /* 消除默认 body 外边距，确保容器 100vh 精准生效 */
}
HTML 结构保持不变，无需修改子元素的 position 或 z-index（z-index 仍有效，用于控制层叠顺序）：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
<div id="container" class="container"> <div class="frame" style="width: 90%; height: 90%; background-color: rgb(112, 111, 111); z-index: -1;"></div> <div class="frame" style="width: 80%; height: 80%; background-color: rgb(112, 111, 111); z-index: 0;"></div> <div class="frame" style="width: 70%; height: 70%; background-color: rgb(85, 84, 84); z-index: 1;"></div> <div class="frame" style="width: 60%; height: 60%; background-color: rgb(59, 59, 59); z-index: 2;"></div> <div class="frame" style="width: 50%; height: 50%; background-color: rgb(24, 23, 23); z-index: 3;"></div> </div>
? 关键原理说明：
- grid-area: 1/1 将每个 .frame 显式放置到同一个网格单元（第 1 行第 1 列），Grid 容器随后通过 place-items: center 将该单元内的每个子元素各自以其内容盒中心为基准，对齐到单元中心——这正是我们所需的“每个 div 独立居中”。
- 由于所有元素共享同一网格区域，它们自然重叠；而 z-index 仍按层叠上下文正常工作，确保视觉层级正确。
- 100vh + margin: 0 保证容器严格撑满视口，不受浏览器默认样式干扰。
⚠️ 注意事项：
- 避免在 .frame 上设置 position: absolute —— 这会使其脱离 Grid 布局，使 grid-area 失效；
- 若需支持旧版浏览器（如 IE），Grid 方案需降级为 transform: translate(-50%, -50%) 配合绝对定位，但现代项目推荐优先使用 Grid；
- place-items 是 CSS Grid Level 2 的简写属性，兼容性良好（Chrome 57+、Firefox 45+、Safari 10.1+、Edge 16+）。
综上，面对多层重叠元素的精确居中需求，CSS Grid 不仅代码更简洁，语义更清晰，而且布局行为完全可预测，是比 Flexbox 更合适、更可靠的解决方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
