17370845950

本文介绍如何利用 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） */
}

✅ 关键要点总结：

• ✅ 必须设置 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 失效。

该方案响应式健壮，窗口缩放时所有元素始终保持同心叠加与绝对居中，是实现多层居中视觉效果的现代、简洁、高性能解法。