Comment centrer une image dans un jumbotron ?

Je suis récemment entré dans le bootstrap et j'ai des difficultés avec l'élément jumbotron. Chaque fois que j'essaie d'ajouter une image au jubotron et de la centrer ou simplement de la déplacer en général, cela ne fonctionne pas avec le css3 normal. J'ai fait mes recherches et je n'ai rien trouvé dessus...

J'ai donné une classe à mon image et j'ai essayé de la déplacer en utilisant des marges, mais cela ne fonctionne tout simplement pas. L'image ne bouge pas quoi que je fasse.

Merci à tous les avancés.

ÉDITER:

HTML :

<div class="middle-container-2">
  <div class="jumbotron">
    <h1 class="display-3 text-center">Go Pro. Stay on top!</h1>
    <p class="lead text-center">Premium gives you access to the Pro scrims instantly and is the only way to support the site!</p>
    <img class="mx-auto d-blok text-center unlock-icon" src="Unlock-icon.png" alt="Unlock"/>
    <hr class="my-4">
    <p class="text-center">It uses utility classes for typography and spacing to space content out within the larger container.</p>
    <p class="lead">
      <a class="read-more-button btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </p>
  </div>
</div>

CSS :

.unlock-icon {
  width: 5rem;
  height: 5rem;
  text-align: center;
}