如何用CSS实现两个大小不同的div在父容器中居中叠加？（居中.叠加.如何用.容器.大小.....）

wufei123 2025-03-12 阅读:57 评论:0

如何在一个父容器中，将两个大小不同的子div实现居中叠加显示？本文将详细讲解如何利用css技巧，实现两个大小不一的div在父容器内水平垂直居中，并让其中一个div覆盖在另一个div之上。首先，我们需要构建HTML结构。父容器div包含两...

如何用CSS实现两个大小不同的div在父容器中居中叠加？

如何在一个父容器中，将两个大小不同的子div实现居中叠加显示？本文将详细讲解如何利用css技巧，实现两个大小不一的div在父容器内水平垂直居中，并让其中一个div覆盖在另一个div之上。

首先，我们需要构建HTML结构。父容器div包含两个子div，分别命名为inner1和inner2，方便后续CSS样式的应用：

PHP

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

接下来，CSS样式的设置至关重要。我们将父容器container设置为相对定位(position: relative)，以便子元素使用绝对定位(position: absolute)进行精确控制。inner1和inner2都使用绝对定位，并通过left: 0; top: 0; right: 0; bottom: 0;占据父容器的全部空间。margin: auto;则确保它们在父容器内水平和垂直居中。inner1设置较大尺寸，inner2设置较小尺寸，最终实现inner2覆盖在inner1上的效果。

完整的CSS代码如下：

PHP

.container {
  width: 500px;
  height: 500px;
  border: 5px solid red;
  margin: 100px auto; /* 父容器居中 */
  position: relative;
}

.inner1, .inner2 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto; /* 子元素居中 */
  background-color: blue; /* 默认背景色 */
}

.inner1 {
  width: 400px;
  height: 400px;
  background-color: yellow; /* 较大div背景色 */
}

.inner2 {
  width: 200px;
  height: 200px;
  background-color: blue; /* 较小div背景色 */
}