Centrer une image dans une colonne - Bootstrap 4

Question

C'est une question qui me semble toujours difficile et je n'ai pas vraiment trouvé de réponse facile. Je veux juste centrer une image ou tout autre élément de bloc à l'intérieur de la grille Bootstrap. Margin: Auto semble rarement fonctionner pour moi.

<!-- Services Section --> 
    <div class ="container" id="services"> 
     <h2>My Service</h2> 
     <div class="row"> 
      <div class="col-sm-4"> 
       <img src="img/wordpress.png"> 
      </div> 
      <div class="col-sm-4"> 
       <img src="img/js.png"> 
      </div> 
      <div class="col-sm-4"> 
       <img src="img/rails64.png"> 
      </div> 

     </div> <!-- end row --> 
    </div> <!-- end container services --> 

Answer 1

Vous pouvez l'utiliser, il va centrer horizontalement et verticalement n'importe quel élément.

.centerImage{ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

Appliquez cette classe à l'image que vous pouvez centrer par rapport à son parent.

En espérant que cela vous aide.