CSS大小不同div居中叠加的巧妙技巧

本文介绍如何使用CSS技巧，实现两个大小不同的div在父容器中水平垂直居中叠加显示。通过设置父容器为相对定位，子div为绝对定位，并巧妙运用`margin: auto;`实现居中效果。 文章详细讲解了HTML结构搭建和CSS样式设置，包括父容器和子div的尺寸、定位以及背景颜色等属性，最终实现一个较大的div被一个较小的div覆盖在父容器中央的效果，并提供完整的代码示例，方便读者快速学习和应用。 学习此技巧，轻松解决网页布局中div元素的叠加与居中难题。

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

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

<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代码如下：

.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背景色 */
}

通过以上HTML结构和CSS样式，即可实现两个子div在父div中重叠且居中显示，且不会超出父div的范围，同时保持父div的外观不受影响。

好了，本文到此结束，带大家了解了《CSS大小不同div居中叠加的巧妙技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！