将图像置于列中心 - 引导程序4

Question

这是一个我似乎总是在努力的问题，我还没有找到一个简单的答案。我只是想将一个图像或任何其他块元素居中在Bootstrap网格中。保证金：汽车很少似乎对我有用。

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

将此类应用于您可以将其父级居中的图像。

希望它有所帮助。