如何将两张照片放在div的中心，一张覆盖另一张在移动屏幕分辨率下

Question

我试图将一个带有两张照片的div精确地居中，但是效果并不好。尝试了不同类型的定位，显示弹性，对齐项目调整内容等等，没有什么可以让我 将图像容器移至中心。

这是我的 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>

这是 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);
 
}

这是第一张图片： 这是第二个

Answer 1

这有帮助吗？

.home_images{
  position: absolute;
  display: flex;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);

}