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

Question

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:

.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);
}

<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>

Here is first image:

And here is second one:

Does this answer your question? [How can I center text (horizontally and vertically) inside a div block?](https://stackoverflow.com/questions/5703552/how-can-i-center-text-horizontally-and-vertically-inside-a-div-block) — Heretic Monkey, Jul 31 '23 at 13:28
@trysetyoutomo There you go link https://www.figma.com/file/u9gJMBfNQXpEeXMyUZ5bBr/Urelocation-v2-~10000-12000-(Copy)?node-id=1548%3A213&mode=dev — Newbie, Jul 31 '23 at 14:25

score 0 · Answer 1 · edited Jul 31 '23 at 13:18

0

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%

edited Jul 31 '23 at 13:18

Heretic Monkey

11,687
7
53
122

answered Jul 31 '23 at 13:12

AffiliateVDev

41
5

score 0 · Answer 2 · edited Aug 04 '23 at 10:42

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.

César Venzac · Accepted Answer · 2023-07-31T14:20:23.203

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

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

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;
}

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

Have a good day!

score 0 · Answer 4 · answered Jul 31 '23 at 18:46

.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);
}

<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>

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Aug 04 '23 at 13:06

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

4 Answers4