如何在CSS Grid容器中使多个元素垂直水平居中且层叠放置？

架构老林

2026-7-13

实现CSS Grid中两个子元素重叠并居中的方法

当然可以实现，核心是让两个子元素占据Grid容器的同一个网格单元格，同时确保它们都水平垂直居中。

你原来的代码只设置了垂直方向的align-self，没处理水平居中，而且默认情况下Grid会将每个子元素分配到独立的网格单元，所以两个元素不会重叠。

解决方案步骤：

给Grid容器添加place-items: center，这个属性可以同时统一设置所有子元素的垂直和水平居中，比单独给每个元素写align-self和justify-self更高效。
给两个子元素都设置grid-area: 1 / 1，强制它们都占据第一行第一列的网格单元，这样第二个元素就会自然覆盖在第一个元素上方。

修改后的完整代码：

<div
  style="
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: 200px;
    width: 200px;
    background-color: blue;
    place-items: center;
  "
>
  <div
    style="
      width: 100px;
      height: 100px;
      background-color: red;
      grid-area: 1 / 1;
    "
  ></div>
  <div
    style="
      width: 50px;
      height: 50px;
      background-color: yellow;
      grid-area: 1 / 1;
    "
  ></div>
</div>