JSFiddle - React, Tailwind, and code Playground
HTML
<br/>
<div id="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
</div>
CSS
div {
padding: 5px;
border: 1px solid gray;
}
div.child {
position: relative;
}
div#parent
{
height: 300px;
}
JavaScript
// Get Total Height of all Child Elements
var parentHeight = $('#parent').height();
var totalHeight = 0;
$('#parent').children('.child').each(function() {
totalHeight = totalHeight + $(this).height();
});
// Set the offset top position for all the child elements
var offsetHeight = (parentHeight - totalHeight) / 2;
console.log(offsetHeight);
$('#parent').children('.child').each(function() {
$(this).css('top', offsetHeight + 'px');
});