如何在一个父容器中，将两个大小不同的子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的外观不受影响。
立即学习“前端免费学习笔记（深入）”；
