How to center a div with 2 photos ,one covering another in mobile screen resolution

I tried to center a div with 2 photos exactly in the center. However it didn't go well. Tried different types of positioning, display flex, align items justify content, etc, nothing allows me to
move image container to the center.

Here is my code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-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);
}

<!-- language: lang-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>

<!-- end snippet -->

Here is first image:

And here is second one:

Will this help?

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

}

In case you want to make it vertically center, use translateY instead of translateX and top: 50% instead of left: 50%

To center the images, you can use flexbox.

.grid {
  display: grid;
  gap: 1.5rem;
}
    
.section {
  padding: 4.5rem 0 2rem;
}
    
.home_container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
    
.home_images {
  display: flex;
  align-items: center;
  justify-content: center;
}
    
.home_big-img {
  z-index: 12;
}

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

In the modified code, I removed the position: absolute from the .home_images class and replaced it with display: flex, align-items: center, and justify-content: center in the .home_container class to center the entire image container on the screen. I also set the height of the container to 100vh to make sure it takes up the full viewport height.

Save the changes, and the images should now be centered on the mobile screen resolution.

To center child elements (img in your case) in a parent element, you should:

1. Give your parent element a correct width and height
2. Apply position: relative, display: flex, align-items: center and justify-content: center to your parent element (.home-images in your case)
3. Apply position: absolute to your child elements

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

section {
  width: 200px;
  height: 200px;
}

.container {
  width: 100%;
  height: 100%;
}

.images {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.big-img {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
}

.small-img {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: blue;
}

<!-- language: lang-html -->

<section class="home">
  <div class="container">
    <div class="images">
      <img class="big-img"/>
      <img class="small-img"/>
    </div>
  </div>
</section>

<!-- end snippet -->

Have a good day!

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-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);
}

<!-- language: lang-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>

<!-- end snippet -->