移动端如何居中包含两张重叠图片的div容器

问题场景 #

尝试将包含两张重叠图片的div完全居中，使用定位、flex布局等方法均未成功，原代码及效果如下：

原代码 #

CSS

.grid {
  display: grid;
  gap: 1.5rem;
}

.section {
  padding: 4.5rem 0 2rem;
}

.home_container {
  position: relative;
  align-items: center;
  justify-content: center;
}

.home_images {
  position: absolute;
  display: flex;
  left: 50%;
  top: 50%;
}

.home_big-img {
  z-index: 12;
}

.home_small-img {
  transform: translateX(-9rem);
}

HTML

<section class="section home grid">
  <div class="home_container container">
    <div class="home_images">
      <img src="./img/man.png" alt="" class="home_big-img">
      <img src="./img/plane.png" alt="" class="home_small-img">
    </div>
  </div>
</section>

当前未居中效果 #

问题分析 #

1. 父容器未启用弹性布局：.home_container 声明了 align-items 和 justify-content，但未设置 display: flex 或 display: grid，这两个属性仅在弹性/网格容器中生效，导致父容器的居中配置无效。
2. 绝对定位元素未完成居中偏移：.home_images 使用 left: 50% 和 top: 50% 仅将容器左上角定位到父容器中心，需配合 transform: translate(-50%, -50%) 才能让容器自身完全居中。
3. 父容器高度缺失：绝对定位元素脱离文档流，若 .home_container 无高度，top: 50% 的定位会基于高度为0的容器偏移，导致位置错误。

修正代码 #

调整后的CSS如下：

.grid {
  display: grid;
  gap: 1.5rem;
}

.section {
  padding: 4.5rem 0 2rem;
}

.home_container {
  position: relative;
  display: flex; /* 启用弹性布局 */
  align-items: center;
  justify-content: center;
  min-height: 80vh; /* 设置最小高度，确保容器有足够空间 */
}

.home_images {
  display: flex;
  /* 若需保留绝对定位，替换为：
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  */
}

.home_big-img {
  z-index: 12;
}

.home_small-img {
  transform: translateX(-9rem);
}

居中后效果 #

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