在Bootstrap容器内垂直居中放置图像

Question

我想在Bootstrap容器中垂直居中每个图像。每个图像都使用“ img-fluid”类，以使其占据相对于屏幕尺寸的列的整个宽度。通常，我会在图像顶部添加50％的边距，并以负的边距等于像素大小（以px为单位）的一半来抵消它，但是看到的图像大小不是恒定的，将无法正常工作。我尝试使用“ vertical-align：middle”将图像居中，但这似乎也不起作用。

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;
}