如何用CSS实现嵌套Div的居中和重叠效果？

要实现嵌套 div 元素的居中和重叠效果，可以使用 CSS 的 flexbox 或 grid 布局来实现居中，并通过 position 属性来实现重叠效果。以下是一个示例代码：

HTML 结构

<div class="outer">
  <div class="inner">Inner Div 1</div>
  <div class="inner">Inner Div 2</div>
</div>

CSS 样式

/* 外层容器样式 */
.outer {
  display: flex; /* 使用 flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  position: relative; /* 相对定位，用于内层 div 的绝对定位 */
  width: 300px; /* 外层容器宽度 */
  height: 300px; /* 外层容器高度 */
  background-color: #f0f0f0; /* 背景色 */
}

/* 内层 div 样式 */
.inner {
  position: absolute; /* 绝对定位，实现重叠效果 */
  width: 150px; /* 内层 div 宽度 */
  height: 150px; /* 内层 div 高度 */
  background-color: #ccc; /* 背景色 */
  border: 1px solid #000; /* 边框 */
  display: flex; /* 使用 flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 第二个内层 div 的样式，用于调整重叠位置 */
.inner:nth-child(2) {
  top: 50px; /* 向下偏移 50px */
  left: 50px; /* 向右偏移 50px */
  background-color: #999; /* 不同的背景色 */
}

解释

1. 外层容器 (outer)：

   • 使用 display: flex 将外层容器设置为 flexbox 布局。
   • justify-content: center 和 align-items: center 用于将内层 div 元素水平和垂直居中。
   • position: relative 用于为内层 div 的绝对定位提供参考。

2. 内层 div (inner)：

   • 使用 position: absolute 将内层 div 设置为绝对定位，使其可以重叠。
   • width 和 height 设置内层 div 的尺寸。
   • display: flex 用于在内层 div 中居中内容。

3. 第二个内层 div (inner:nth-child(2))：

   • 通过 top 和 left 属性调整第二个内层 div 的位置，使其与第一个内层 div 重叠。
   • 设置不同的背景色以区分两个内层 div。

结果

• 外层 div 中的两个内层 div 会居中显示，并且第二个内层 div 会与第一个内层 div 重叠。

通过这种方式，你可以轻松实现嵌套 div 的居中和重叠效果。