如何在Flexbox中居中多个重叠的div元素

问题根源 #

你之前尝试的两种方法都有局限性：

• 用margin计算居中：依赖「子元素尺寸+2倍margin=100%」的固定比例，窗口尺寸变化时，元素百分比尺寸和margin百分比（基于容器宽高）的计算逻辑不匹配，导致居中失效。
• Flex布局：Flex会默认按顺序排列子元素，即使子元素设置了position: absolute，多个元素仍会占据容器空间，只有第一个元素能正确居中，后续元素位置偏移。

正确实现方案 #

核心思路是让每个子div基于容器的中心点绝对定位，通过transform实现自身居中，不受窗口尺寸变化影响：

1. 容器保持position: relative，作为子元素的定位上下文
2. 给所有.frame添加定位和居中样式，确保无论尺寸大小都能精准居中
3. 保留z-index控制层级叠加

完整代码示例 #

CSS代码

.frame {
  position: absolute;
  border: 3px solid black;
  /* 核心居中样式 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.container {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background-color: rgb(130, 130, 130);
  border: 3px solid green;
}

HTML代码

<div id="container" class="container">
  <div class="frame" style="width: 90%; height: 90%; background-color: rgb(112, 111, 111); z-index: -1;"></div>
  <div class="frame" style="width: 80%; height: 80%; background-color: rgb(112, 111, 111); z-index: 0;"></div>
  <div class="frame" style="width: 70%; height: 70%; background-color: rgb(85, 84, 84); z-index: 1;"></div>
  <div class="frame" style="width: 60%; height: 60%; background-color: rgb(59, 59, 59); z-index: 2;"></div>
  <div class="frame" style="width: 50%; height: 50%; background-color: rgb(24, 23, 23); z-index: 3;"></div>
</div>

补充说明 #

• transform: translate(-50%, -50%)是基于元素自身的宽高计算偏移量，所以不管元素尺寸是多少，都能精准居中
• 容器用100vw和100vh确保占满整个视口，始终显示在屏幕中间
• 子元素的z-index值越大，层级越高，会显示在最上层

内容的提问来源于stack exchange，提问作者Rashluk