Bootstrap 4 引导4：相对于img中心的位置

我对图像的绝对位置和相对位置有问题。当然要解决这个问题

我需要感谢你对我的帮助。 这是我想要的截图

多谢各位

<div class="container-fluid text-center">
   <img src="https://img.bfmtv.com/c/630/420/6ea/978bb45ee10aae30b26393fdd58f6.png" class="img-google" />
   <div class="col-sm-12 mx-auto text-center py-5">
      <div class="card text-white">
       <h5 class="card-text" style="padding-bottom: 35px;font-weight: bolder">
        Lorem
      </h5>
      <p class="card-text">
         Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de
    texte pour réaliser.  </p>
       </div>
    </div>
</div>

body {
  padding: 100px 0;
 }

.container-fluid {
  position: relative;
  background-color: #42145F;
 }

.img-google {
  position: absolute;
  bottom: 190px;
  width:150px;
}

.card {
  top: 100px;
  background-color: #42145F;
}

洛勒姆

Le Lorem Ipsum最简单的是人造文本，它采用了一种构图和一页一页的前卫印象。这是1500年出版的一本关于《现代文学》的著作，是一本关于现代文学的著作
给我发短信
身体{
填充：100px0；
}
.容器液体{
位置：相对位置；
背景色：#42145F；
}
.img谷歌{
位置：绝对位置；
底部：190px；
宽度：150px；
}
.卡片{
顶部：100px；
背景色：#42145F；
}

.img containerz{
高度：25px；
文本对齐：居中；
字体：0/0A；
}
.img elementz{
显示：内联块；
垂直对齐：中间对齐；
字体：12px/1开放式无Helvetica Neue；
}

洛勒姆

Le Lorem Ipsum最简单的是人造文本，它采用了一种构图和一页一页的前卫印象。这是1500年出版的一本关于《现代文学》的著作，是一本关于现代文学的著作
给我发短信

给你：

更改：

.img-google {
   position: absolute;
   bottom: 190px;
   width: 150px;
 }

及

致：

解释：

要使图像中心对齐：
显示：块
保证金：自动

绝对定位和相对定位之间的差异：

要使文本中心对齐并呈白色，请执行以下操作：

文本对齐：居中
颜色：白色

---

希望这有帮助

请运行代码片段，它也有bs4和卡片@cyphosThanks，非常感谢大家。很好的一天！！请检查它作为答案，这样它也将有助于其他@cyphos

.card {
   top: 100px;
   background-color: #42145F;
 }

.img-google{
    position: relative;
    top: -40px;
    width: 150px;
    display: block;
    margin: auto;
}
.card {
    margin: auto;
    width: 70%;
    background-color: #42145F;
    text-align: center;
    color: white;
 }