JSFiddle - React, Tailwind, and code Playground

HTML

<div height="50px" class="dca">
    one
</div>
<div style="height:300px;" class="dca">
    two
</div>
<div style="height:400px;" class="dca">
    three
</div>
<div style="height:600px;" class="dca">
    four
</div>

CSS

html, body {
    height: 100%;
}
#container{
    background-color:#DDD;
    border:1px solid black;
    width:500px;
    height:500px;
}
.dca {
    background-color:#FFF;
    border:2px solid blue;
    float:left;
    width:100px;
    margin:0px 10px;
    position:relative;
    top: 100px;
}

JavaScript

var cHeight = $(document.body).height();
$(".dca").each(function(){
    console.log($(this).height()+100,cHeight);
    if(($(this).height()+100)<cHeight){
        $(this).css({top: '50%', marginTop: - $(this).height() / 2 });
    }
});