Align text to the center of the image - Bootstrap

Question

I’m using Bootstrap 4 pro site development. I thought I’d start by including the basic grid structure along with the image and an H1 (to test positioning). I wrapped the image and H1 in a div that I gave the class of img-ds. This class contains a position: relative and a display: inline-block. On H1, I put a class I called texto-ds containing a position: absolute. After that, I thought if I used the parameters top: 50% and left: 50%, my text would be totally centered in the center, but I got this result, with the H1 leaning slightly to the lower right side (the X is roughly where I expected the H1 to be positioned):

Code HTML of this passage:

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12 p-0">
      <div class="img-ds">
        <img class="img-fluid" src="img/bg-ds.jpg">
        <h1 class="texto-ds">Teste</h1> 
      </div>
    </div>
  </div>
</div>

Code CSS of this passage:

.img-ds {
  position: relative;
  display: inline-block;
}

.texto-ds {
  position: absolute;
  top: 50%;
  left: 50%;
  color: white;
}

I made a codepen to facilitate your visualization. Note that at first hand, H1 is aligned to the correct center of the image. However, when the resolution is from a mobile device, H1 leans to the right side.

Codepen Demonstrative

Answer 1

Update your code in the class .text-lg-center for:

.text-lg-center {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: black;
     margin: 0;
     padding: 0;
}

Upshot:

Answer 2

Change the class to .text-lg-center { color: white; }

And H1’s line in HTML to Testing

Answer 3

add transform: translate(-50%, -50%) in the text-ds