JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainPageinlineContent" class="s10inlineContent">
</div>

CSS

.s10inlineContent {
position: absolute;

width:100px;
height:20px;
left:-5550px;
/*margin:auto;
margin-top:auto;*/
z-index:10;
background-color:black;
overflow:auto;
opacity: 0.9;
}

JavaScript

$(document).ready(function () {
    jQuery.fn.center = function () {
        this.css("position", "absolute");
        this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
                                                    $(window).scrollTop()) + "px");
        this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
                                                    $(window).scrollLeft()) + "px");
        return this;
    }

    $("#mainPageinlineContent").animate({}, $("#mainPageinlineContent").center(), 2000);
});