如何使用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的宽高和背景颜色，可以轻松修改重叠效果和视觉样式。
立即学习“前端免费学习笔记（深入）”；
