如何用CSS实现两个子div在父div中重叠并居中？-css教程-PHP中文网

如何用CSS实现两个子div在父div中重叠并居中？

聖光之護

发布： 2025-03-09 09:40:11

原创

1177人浏览过

如何用css实现两个子div在父div中重叠并居中？

如何使用CSS在一个父级div中实现两个子div的重叠和居中？本文将详细讲解如何在一个父div中，使两个大小不同的子div相互重叠，并同时在父div内水平和垂直居中。 “重叠”指的是一个子div覆盖另一个子div。我们将使用CSS定位属性实现此效果，确保子div不会超出父div边界，且父div外观不受影响。

关键在于巧妙运用CSS定位。首先，父级div需要设置position: relative，为绝对定位的子div提供参考坐标。然后，两个子div都需设置position: absolute; left: 0; top: 0; right: 0; bottom: 0; 这使得子div能同时占据父div的四个角，并通过margin: auto;实现水平和垂直居中。

较大的子div作为底层背景，较小的子div叠加在其上。通过设置不同的宽高和背景颜色，即可区分这两个div。为了使父div在页面居中，可以添加margin: 100px auto;。以下为代码示例：

百度文心百中

百度大模型语义搜索体验中心

查看详情

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

登录后复制

.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;
}

登录后复制

.box代表父div，.inner1和.inner2代表两个子div。通过调整.inner1和.inner2的宽高和背景颜色，可以轻松修改重叠效果和视觉样式。

立即学习“前端免费学习笔记（深入）”；

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