本文介绍如何利用 css grid 的 `place-items: center` 与 `grid-area: 1/1` 特性，高效、响应式地将多个不同尺寸的重叠 div 同时水平垂直居中于视口中央，彻底解决 flexbox 在此场景下的布局失效问题。
在 Web 布局中，当需要将多个尺寸各异、层叠堆叠（z-index 控制）的 div 同时居中于屏幕正中央时，许多开发者会本能地选择 Flexbox —— 尤其是为容器设置 display: flex; justify-content: center; align-items: center。但正如实际案例所示：Flexbox 默认将所有子元素视为并排排列的弹性项目，即使它们视觉上重叠，Flex 容器仍按顺序分配主轴与交叉轴空间，导致仅首个子元素被真正居中，其余元素因默认 flex-direction: row 和自动伸缩行为而偏移或错位。
根本原因在于：Flexbox 的居中逻辑作用于整个弹性流，而非每个子项的独立定位；而重叠布局的本质需求是——所有元素共享同一中心锚点，各自基于该锚点进行尺寸缩放与层级叠加。此时，CSS Grid 提供了更语义化、更可控的解决方案。
✅ 推荐方案：CSS Grid + 显式网格区域对齐
核心思路是让所有 .frame 元素占据同一个网格单元（grid-area: 1 / 1），再通过容器级 place-items: center（等价于 justify-items: center; align-items: center）统一将其内容锚点对齐至网格中心：
.container {
display: grid;
place-items: center; /* 同时控制内容在行和列方向的对齐 */
height: 100vh; /* 关键：使用 viewport height 确保全屏高度 */
width: 100vw; /* 可选：显式设为全宽，避免滚动条干扰 */
background-color: rgb(130, 130, 130);
border: 3px solid green;
box-sizing: border-box;
margin: 0; /* 防止 body 默认外边距影响 */
}
.frame {
grid-area: 1 / 1; /* 所有 frame 强制定位到第1行第1列的同一网格区域 */
border: 3px solid black;
box-sizing: border-box; /* 确保 width/height 包含边框，避免尺寸计算偏差 */
}? 关键要点说明：
- place-items: center 作用于 Grid 容器的内容框（content box），它将每个子项的内容框中心点对齐到网格轨道的中心，不受子项排列顺序影响；
- grid-area: 1/1 是声明式定位，强制所有子项渲染在同一网格单元内，天然支持层叠（z-index 依然生效）；
- 使用 100vh（而非 100%）确保容器高度严格等于视口高度，避免因父级高度未定义导致居中失效；
- box-sizing: border-box 避免边框额外增加元素尺寸，保障百分比宽高精准生效；
- 移除 body 默认 margin 是常见但易忽略的细节，否则顶部/左侧会出现空白间隙。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 若需兼容 IE11，请改用 display: -ms-grid; -ms-grid-row-align: center; -ms-grid-column-align: center 并配合 -ms-grid-row: 1; -ms-grid-column: 1，但强烈建议优先支持现代浏览器；
- 不要为 .frame 设置 position: absolute（原代码中存在），这会脱离 Grid 流，使 grid-area 失效；
- z-index 仅在定位元素（position 不为 static）上有效，但 Grid 子项默认具有层叠上下文，因此只要保留 z-index 即可正常工作。
总结：当面对「多层重叠 + 统一居中」这一特定布局模式时，CSS Grid 凭借其显式网格线控制与内容锚点对齐能力，比 Flexbox 更加精准、简洁且具备强响应性。掌握 place-items 与 grid-area 的组合用法，是构建现代居中叠加 UI（如卡片堆叠、模态层、loading 动画组）的关键技能。
