本文介绍如何利用 css grid 的 `place-items: center` 和 `grid-area: 1/1` 实现多个不同尺寸 div 在容器内真正居中且完全重叠，解决 flexbox 在此场景下仅居中首个子元素的局限性。
在构建层叠式视觉效果（如渐变缩放卡片、同心遮罩或深度感 UI 组件）时，常需将多个尺寸不一的
精确叠加于视口正中心。此时若错误依赖 Flexbox 的 justify-content: center + align-items: center，会发现只有第一个子元素被居中，其余元素仍按文档流默认位置排列——这是因为 Flexbox 将所有子项视为独立的弹性项目，在主轴和交叉轴上统一对齐，但不会让它们共享同一空间坐标；而重叠需求本质上要求所有元素的几何中心严格重合。
CSS Grid 提供了更精准的控制方案：通过 display: grid 配合 place-items: center（等价于 justify-items: center; align-items: center），可使所有直接子元素在网格容器内整体居中；再配合 grid-area: 1/1（即 grid-row-start: 1; grid-column-start: 1; grid-row-end: 2; grid-column-end: 2），强制所有 .frame 占据同一个网格单元格，从而实现像素级重叠与联合居中。
以下是完整、可靠的实现代码：
* {
box-sizing: border-box;
}
body {
margin: 0; /* 消除默认 body 外边距，确保容器占满视口 */
height: 100vh;
}
.container {
display: grid;
place-items: center; /* 同时实现水平+垂直居中 */
width: 100%;
height: 100vh; /* 推荐使用 vh 而非 %，避免父容器高度未定义导致失效 */
background-color: rgb(130, 130, 130);
border: 3px solid green;
}
.frame {
grid-area: 1 / 1; /* 所有 frame 定位到第 1 行第 1 列的同一网格区域 */
border: 3px solid black;
/* z-index 仍有效，层级由数值决定（注意：需确保父容器为定位上下文或启用 stacking context） */
}<div 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>
✅ 关键要点总结：
立即学习“前端免费学习笔记（深入）”；
- ✅ 必须设置 body { margin: 0 } 与 .container { height: 100vh }，确保容器撑满视口；仅用 height: 100% 在多数情况下无效（因父级 html/body 高度未显式定义）。
- ✅ grid-area: 1/1 是实现重叠的核心，它覆盖默认网格自动分配行为，让所有子项“挤入同一格子”。
- ✅ z-index 依然生效，但需注意：Grid 容器本身会创建新的层叠上下文（stacking context），因此各 .frame 的 z-index 值在容器内独立比较，无需额外设置 position。
- ⚠️ 避免混用 position: absolute（如原问题中 .frame { position: absolute }），这会脱离 Grid 布局流，导致 grid-area 失效。
该方案响应式健壮，窗口缩放时所有元素始终保持同心叠加与绝对居中，是实现多层居中视觉效果的现代、简洁、高性能解法。
