如何让两个子 div 在母 div 中重叠并居中？

如何让 p 中的两个子 p 重叠并在母 p 中居中？

需要在两个子 p 中的一个后面叠放另一个，同时保持它们在母 p 中水平或垂直居中，而不会影响母 p 的外观或超出母 p 的边界。

css 实现

• 将母 p 定位为相对定位（position: relative）。
• 将子 p 定位为绝对定位（position: absolute）以将它们从正常流中移除。
• 使用 left, top, right, bottom 属性将子 p 居中。
• 设置子 p 的 margin 为 auto 以将其余白设置为其两侧的所有可用空间的平均值。

示例代码

<p class="box">
  <p class="inner1"></p>
  <p class="inner2"></p>
</p>

登录后复制

.box {
  width: 500px;
  height: 500px;
  border: 5px solid red;
  margin: 100px auto;
  position: relative;
}

.inner1,
.inner2 {
  width: 200px;
  height: 200px;
  background: blue;
  margin: auto;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.inner1 {
  width: 400px;
  height: 400px;
  background: yellow;
}

登录后复制

结果：

在母 p 中重叠的两个子 p，较小的 p 叠放在较大的 p 上方，并且两者在水平和垂直方向上都居中。

以上就是如何让两个子 p 在母 p 中重叠并居中？的详细内容，更多请关注抖狐科技其它相关文章！