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

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>

原文由 Matthew 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果你使用的是 Bootstrap 4（看起来你是），你可以使用 flex 对齐类，如 align-items-center justify-content-center

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

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

原文由 tius 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 vinoth s 发布，翻译遵循 CC BY-SA 4.0 许可协议