如何使用 CSS 使两个 div 在父 div 内居中并重叠？

如何让 div 内的两个 div 居中且重叠

在一个 div 中包含两个子 div 时，我们可能希望这些子 div 既居中放置又重叠在一起。为了实现此目的，我们可以使用 CSS 的定位属性和绝对定位。

CSS 实现

以下 CSS 代码将创建两个重叠并在包含它们的 div 内居中的 div：

.parent-div {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  position: relative;
}

.child-div-1,
.child-div-2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
}

.child-div-2 {
  left: 50%;
  transform: translate(-50%, 0);
}

此代码设置一个包含 div（.parent-div），具有固定宽度和高度，并使用 margin: 0 auto 使其水平居中。它的两个子 div（.child-div-1 和 .child-div-2）使用绝对定位相对于其父级放置。

为了居中 .child-div-2，我们在水平方向上将 left 设置为 50%，然后使用 transform 属性进行 translation，将 .child-div-2 向左偏移 50%，使其水平居中。

示例

以下 HTML 代码显示了如何使用这些 CSS 类：

<div class="parent-div">
  <div class="child-div-1">子 div 1</div>
  <div class="child-div-2">子 div 2</div>
</div>

这将创建一个具有两个重叠且水平居中的 div 的 div。

以上就是如何使用 CSS 使两个 div 在父 div 内居中并重叠？的详细内容，更多请关注其它相关文章！