Невозможно центрировать изображение внутри карусели на угловых 8, используя ngx-bootstrap

Question

Снимок экрана

Я не могу отцентрировать изображение на моей карусели, используя Angular 8 и ngx-bootstrap. Я все еще довольно новичок в использовании ngx-bootstrap, я уже пытался добавить классы img-Fluid к изображению, mx-auto к слайду, но ни один из них не работал. Что я могу делать не так?

<div class="bg-carousel">
    <carousel [pauseOnFocus]="true">
        <slide class="mx-auto">
          <img  class="img-fluid" src="./assets/imgs/logofinal.png" alt="First slide" style="display: block; width: 100%;">
          <div class="carousel-caption d-none d-md-block">
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </div>
        </slide>
        <slide>
          <img src="./assets/imgs/logofinal.png" alt="Second slide" style="display: block; width: 100%;">
          <div class="carousel-caption d-none d-md-block">
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </div>
        </slide>
        <slide>
          <img src="./assets/imgs/logofinal.png" alt="Third slide" style="display: block; width: 100%;">
          <div class="carousel-caption d-none d-md-block">
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </div>
        </slide>
      </carousel>
</div>