如何将具有绝对位置的文本移动到父元素的中心 div

Question

我是编码新手，我正在使用 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;
}

Answer 1

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

Answer 2

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

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

如何将具有绝对位置的文本移动到父元素的中心 div

How to move text with absolute position to centre of the parent div

html

css

bootstrap-4

HTML

CSS