JSFiddle - React, Tailwind, and code Playground

HTML

<div class="footer">
    	<div class="vertical_placer">
                <div class="inner_placer">
                    <div></div>
                </div>
      </div>
</div>

CSS

.vertical_placer{
    background:red;
	position:absolute; 
	height:100%; 
	width:100%;
    display: table;
}
.inner_placer{   
    display: table-cell;
	vertical-align: middle;
	text-align:center;
}
 
.inner_placer div{ 
    background:blue;
	width: 18%;
	min-height: 20px;
	max-height: 40px;
}

JavaScript

its like we building a table