如何让 div 内的两个 div 居中且重叠
在一个 div 中包含两个子 div 时，我们可能希望这些子 div 既居中放置又重叠在一起。为了实现此目的，我们可以使用 CSS 的定位属性和绝对定位。
CSS 实现
以下 CSS 代码将创建两个重叠并在包含它们的 div 内居中的 div：
.parent-div {
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
}
.child-div-1,
.child-div-2 {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
.child-div-2 {
left: 50%;
transform: translate(-50%, 0);
}此代码设置一个包含 div（.parent-div），具有固定宽度和高度，并使用 margin: 0 auto 使其水平居中。它的两个子 div（.child-div-1 和 .child-div-2）使用绝对定位相对于其父级放置。
立即学习“前端免费学习笔记（深入）”；
为了居中 .child-div-2，我们在水平方向上将 left 设置为 50%，然后使用 transform 属性进行 translation，将 .child-div-2 向左偏移 50%，使其水平居中。
示例
以下 HTML 代码显示了如何使用这些 CSS 类：
子 div 1子 div 2
这将创建一个具有两个重叠且水平居中的 div 的 div。
