JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <div id="inner">
    </div>
</div>

CSS

#outer { height: 300px;
    width: 300px; 
    background: #00f;
    position: relative;
}

#inner { height: 100px;
    width: 100px;
    background: #ff0;
    position: absolute;
}

JavaScript

var outerHeight = $('#outer').height();
var innerHeight = $('#inner').height();
var outerWidth = $('#outer').width();
var innerWidth = $('#inner').width();
$('#inner').css('top', (outerHeight - innerHeight)/2);
$('#inner').css('left', (outerWidth - innerWidth)/2);