Vertically center an image within a Bootstrap container

I want to vertically center each image within a Bootstrap container. Each image uses the "img-fluid" class such that it takes up the full width of the column relative to the size of the screen. Typically, I would add a 50% margin on top of the image and counteract that with a negative margin equal to half the images size in px, however seeing as the image size is not constant this will not work. I attempted to center the images using "vertical-align: middle", however this doesn't seem to work either.

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