将图像居中放置在列中 - 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%); 
} 

将此类应用于图片，您可以将图片应用到您的父母的中心。

希望能帮上忙。