在Bootstrap网格中垂直和水平居中图像

Question

我无法弄清楚如何垂直和水平居中图像.基本上我有两排图像,所有图像的宽度都是150,但高度不同.

CSS

.image-center {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

HTML

<div class="row">
        <div class="col">
            <img class="center-block image-center" width="150" src="imagery/1.png"/>
        </div>
        <div class="col">
            <img class="center-block image-center" width="150" src="imagery/2.png"/>
        </div>            <div class="col">
            <img class="center-block image-center" width="150" src="imagery/3.png"/>
        </div>            <div class="col">
            <img class="center-block image-center" width="150" src="imagery/4.png"/>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <img class="center-block" width="150" src="imagery/5.png"/>
        </div>            <div class="col">
            <img class="center-block" width="150" src="imagery/6.png"/>
        </div>            <div class="col">
            <img class="center-block" width="150" src="imagery/7.png"/>
        </div>            <div class="col">
            <img class="center-block" width="150" src="imagery/8.png"/>
        </div>
    </div>

Answer 1

如果您正在使用Bootstrap 4(看起来很像),您可以使用flex -aligned-center-justify-content-center等flex对齐类

 <div class="col d-flex align-items-center justify-content-center">

更多信息:https://getbootstrap.com/docs/4.1/layout/grid/#alignment

Answer 2

该 CSS 将响应任何设备。它将水平和垂直居中。

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