html - 在 Bootstrap 容器中垂直居中图像

Question

我想在 Bootstrap 容器中垂直居中每个图像。每个图像都使用“img-fluid”类，这样它就占据了相对于屏幕大小的列的整个宽度。通常，我会在图像顶部添加 50% 的边距，并使用等于图像大小（以 px 为单位的一半）的负边距来抵消它，但是由于图像大小不是恒定的，这将不起作用。我尝试使用“垂直对齐：中间”将图像居中，但这似乎也不起作用。

HTML：

<div class = "container-fluid">
    <div class = "row text-center">
        <div class = "col-4">
            <img src = "images/image1.png" class = "img-fluid" id = "center">
        </div>
        <div class = "col-4">
            <img src = "images/image2.png" class = "img-fluid" id = "center">
        </div>
        <div class = "col-4">
            <img src = "images/woodside_lo.png" class = "img-fluid" id = "center">
        </div>
    </div>
</div>

CSS：

#center {
  vertical-align: middle;
}

Answer 1

#center {
  vertical-align: middle;
  margin:auto;
}