列内の画像のセンタリング - ブートストラップ4

Question

これは私がいつも苦労しているような質問ですが、簡単な答えは見つけられません。ブートストラップグリッドの中に画像やその他のブロック要素を配置したいだけです。マージン：オートはほとんど私のために働くようです。

<!-- 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

これを使用すると、任意の要素を水平方向および垂直方向に中央に配置できます。

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

このクラスを、その親を中央に置くことができる画像に適用します。

願っています。