將圖像居中放置在列中 - Bootstrap 4

Question

這是一個我似乎總是苦惱的問題，而且我還沒有真正找到一個簡單的答案。我只想將圖像或任何其他塊元素置於Bootstrap Grid中。保證金：自動很少似乎爲我工作。

<!-- 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%); 
} 

將此類應用於圖片，您可以將圖片應用到您的父母的中心。

希望能幫上忙。