如何将图像放置在 div 内的底部中心？

Question

我试图将图像定位在 div 的中心和底部，现在我有了这个： image here

我需要这样做：image here

我需要将手机图片居中div，我的代码：

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

Answer 1

简答： 尝试将这两行 CSS 添加到您的 <img> child

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

解释：

使用left图像移动到中心但中心点将与左侧匹配，

所以使用 translate 我们将图像分成两半并移动它以使其完全居中！

代码示例：

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

结果：

如何将图像放置在 div 内的底部中心？

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

html

css

position

image

css-position