【问题标题】：How to move text with absolute position to centre of the parent div如何将具有绝对位置的文本移动到父 div 的中心
【发布时间】：2022-01-14 11:44:06
【问题描述】：

我是编码新手，我正在使用 bootstrap 4。我想将文本与图像重叠并将其与中心对齐，这是代码...请帮助

HTML

<div class="container-fluid front_page">
<img src="images/front_page_img.jpg" alt="front_page_image" class="front_page_img">
<div class="front_page_brand">
  <h1>T.A.C.S.</h1>
</div>

CSS

.container-fluid {
  padding: 0;
}

/* FRONT PAGE */
.front_page {
  position: relative;
}
.front_page_img {
  max-width: 100%;
  position: absolute;
}
.front_page_brand {
  position: absolute;
  color: red;
}

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

您需要做的就是调整父容器和justify-content: center;。然后，由于您的位置已经是绝对的，它将与图像重叠。查看下面的代码 sn-p。

.container-fluid {
  padding: 0;
}

/* FRONT PAGE */
.front_page {
  position: relative;
  display: flex;
  justify-content: center;
}
.front_page_img {
  max-width: 100%;
  position: absolute;
}
.front_page_brand {
  position: absolute;
  color: red;
}

<div class="container-fluid front_page">
<img src="https://dummyimage.com/400/000/fff" alt="front_page_image" class="front_page_img">
<div class="front_page_brand">
  <h1>T.A.C.S.</h1>
</div>

【讨论】：

【解决方案2】：

.front_page_brand {
  position: absolute;
  color: red;
  left: 50%;
  transform: translate(-50%, 0);
}

【讨论】：