How do I position an image at the bottom center inside a div?

Question

Im trying to position an image in center and bottom of a div, now I have this: image here

and I need to do this: image here

I need to center the cellphone image in the div, my code:

    .titulo {
      position: relative;
    }
    .titulo img {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
    }
<section class="titulo">
    <div class="container">
              <div class="row">
                <div class="col-12">
                  <img src="/img/background/whatsapp.png" alt="" />
                </div>
              </div>
            </div>
</section>

Here is what you're looking for: https://stackoverflow.com/questions/1776915/how-can-i-center-an-absolutely-positioned-element-in-a-div — Andrew Garcia, Jun 02 '22 at 15:34

Laaouatni Anas · Accepted Answer · 2022-06-02T15:54:59.690

short answer: Try adding these 2 lines of CSS to your <img> child

left: 50%;
transform: translateX(-50%);

explanation:

using left the image moves to the center but the center point will match the left side,

so using translate we divide the image in half and it is moved so that it is perfectly centered!

code example:

.phone {
  position: absolute;
  bottom: 0;
  /* the solution */
  left: 50%;
  transform: translateX(-50%);
}

.bg {
  /* change this link to yout background image (not the phone) */
  background-image: url("https://i.stack.imgur.com/Sy91H.jpg");
  /* this make the background -> responsive */
  background-size: cover;
  /* take 100% of the space */
  /* (if you need less than 100% don't change this, instead change the parent height) */
  height: 100%;
  /* this line is important, and is needed for making the position work in image or childrens */
  position: relative;
}

* {
  /* this solve the scroll problem */
  box-sizing: border-box;
}

html,
body {
  /* this solve the little margin on body tag (chrome) */
  margin: 0;
  /* html take the 100% of height */
  height: 100%;
}

<!--background-->
<section class="bg">
  <!-- phone -->
  <img class="phone" src="https://i.stack.imgur.com/cfq59.png" />
</section>

results:

How do I position an image at the bottom center inside a div?

1 Answers1