Bootstrap 4. How to position text in the middle of a scalable image?

Question

css

Good afternoon!
There is an image (background) that scales while maintaining aspect ratio when the browser window is resized.
I can’t insert text in the center (
I am writing on Bootstrap 4, for sure this functionality already exists there.
I do this:

<div class="container-fluid">
  <img src="img/image.jpg" class="w-100" alt="">
    <div class="row">
      <h1 class>Текст</h1>
    </div>
  </div>  	  		
</div>

In this case, the inscription is located under the image. How to position the inscription in the middle?

Answer 1

Maybe this will fit

Answer 2

Bootstrap has nothing to do with it. You need to use position: absolute in order to overlay text on the image in your example. You can also make a div with the background of the specified image, set a static (or minimum) height for this div, and place the text inside. And write to the div itself:

display: inline-flex;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
align-items: center;
-ms-flex-align: center;
-webkit-align-items: center;
justify-content: center;
-webkit-justify-content: center;