[分享]css两个div重叠水平居中

在前端开发中，我们经常需要让两个div元素水平居中并重叠。下面我们来介绍如何用CSS实现这个操作。首先，在HTML文件中添加两个div元素： Box 1 Box 2 并为这两个元素添加CSS样式： ....

在前端开发中，我们经常需要让两个div元素水平居中并重叠。下面我们来介绍如何用CSS实现这个操作。

首先，在HTML文件中添加两个div元素：

 <div class="box">Box 1</div>
  <div class="box">Box 2</div> 

并为这两个元素添加CSS样式：

 .box {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;   /* 因为元素高度为200px，所以向上偏移100px */
    margin-left: -100px;  /* 因为元素宽度为200px，所以向左偏移100px */
  }
  
  .box:nth-child(2) {
    z-index: 1; /* 设置层级，让第二个元素在上面 */
    background-color: #f00;   /* 给第二个元素设置不同的背景色 */
  } 

在以上样式中，我们为两个元素设置了相同的宽高、背景色，以及绝对定位、居中等样式。为了让第二个元素在上面，我们使用了z-index属性，并给第二个元素设置不同的背景色。

通过以上样式，就实现了两个div元素水平居中并重叠的效果。