JSFiddle - React, Tailwind, and code Playground

HTML

<div id="yourdiv">
<img height="200" width="100" src="x" />
<img height="100" width="100" src="x" />
<img height="150" width="100" src="x" />
<img height="300" width="100" src="x" />
</div>

CSS

#yourdiv {
    height: 400px;
    background-color: black;
}
#yourdiv img {
    margin: 0 10px;
    border:1px solid red;
  
}

JavaScript

$(document).ready(function() {
    var $yourdiv = $("#yourdiv");
    var divHeight = $yourdiv.height();
    
    $("img",$yourdiv).each(function() {
        var imgElement = $(this);
        var imgPadding = (Math.floor((divHeight-imgElement.height()) / 2));
        imgElement.css('margin-top',imgPadding+'px');
    });
});