JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="center it" onclick="popUp('foo', '');" />
<div id="foo">Hi</div>

CSS

#foo {
    padding: 25px;
    text-align: center;
    background-color: gray;
}

JavaScript

function popUp(id, type) {
    var popUpBox = document.getElementById(id);

    popUpBox.style.position = "fixed";
    popUpBox.style.display = "block";

    popUpBox.style.zIndex = "6";

    popUpBox.style.top = "50%";
    popUpBox.style.left = "50%";

    var height = popUpBox.offsetHeight;
    var width = popUpBox.offsetWidth;
    var marginTop = (height / 2) * -1;
    var marginLeft = (width / 2) * -1;

    popUpBox.style.marginTop = marginTop + "px";
    popUpBox.style.marginLeft = marginLeft + "px";
}