CSS实现两个div在父div内居中且重叠的方法

在网页设计中，常常会遇到需要将两个div在父div内居中且重叠显示的需求。这种布局能够为页面增添独特的视觉效果，提升用户体验。接下来，我们就探讨一下实现这一布局的几种常用方法。

绝对定位与负边距

可以使用绝对定位和负边距来达成目标。对父div设置相对定位，使其成为定位上下文。然后，将子div设置为绝对定位，并通过top、left属性将其左上角定位到父div的中心位置。接着，利用负边距将子div向上和向左移动自身宽度和高度的一半，从而实现水平和垂直居中。对于重叠效果，通过设置z-index属性来调整两个div的堆叠顺序，数值大的div会显示在上方。示例代码如下：

.parent {
  position: relative;
  width: 400px;
  height: 400px;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  z-index: 1;
}

绝对定位与transform

除了负边距，还可以借助CSS3的transform属性来实现居中。同样对父div设置相对定位，子div绝对定位到父div中心。然后使用transform: translate(-50%, -50%)，这种方法更加简洁，而且在处理不同尺寸的元素时更具灵活性。同样通过z-index控制重叠顺序。代码如下：

.parent {
  position: relative;
  width: 400px;
  height: 400px;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  z-index: 1;
}

flex布局

使用flex布局也能轻松实现。将父div的display设置为flex，并使用justify-content: center和align-items: center来实现子div在父div内的水平和垂直居中。对于重叠，依然通过z-index来控制。代码示例：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 400px;
}
.child {
  width: 100px;
  height: 100px;
  z-index: 1;
}

掌握这些方法，就能根据项目的实际需求，灵活选择合适的方式来实现两个div在父div内居中且重叠的布局效果，为网页设计增添更多创意与魅力。