JSFiddle - React, Tailwind, and code Playground

HTML

<div id="MyDiv">
    hello
</div>

CSS

DIV#MyDiv
{
    position:absolute;
    width:300px;
    height:150px;
    border:1px solid #000;
    padding:10px;
}

JavaScript

function centerDiv(id) {
    var winH = $(window).height();
    var winW = $(window).width();

    var dialog = $(id);

    var maxheight = dialog.css("max-height");
    var maxwidth = dialog.css("max-width");

    var dialogheight = dialog.height();
    var dialogwidth = dialog.width();

    if (maxheight != "none") {
        dialogheight = Number(maxheight.replace("px", ""));
    }
    if (maxwidth != "none") {
        dialogwidth = Number(maxwidth.replace("px", ""));
    }

    dialog.css('top', winH / 2 - dialogheight / 2);
    dialog.css('left', winW / 2 - dialogwidth / 2);
}

centerDiv("#MyDiv");