JSFiddle - React, Tailwind, and code Playground

HTML

<div id="popUp">
    My Popup
</div>
<a id="openPopUp">Click</a>

CSS

#popUp
{
    display: none;
    border: 1px solid #000;
    padding: 25px;
}

JavaScript

$("#openPopUp").click(function(){
    CenterPopup();
    
});

function CenterPopup() {
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popUp").height();
    var popupWidth = $("#popUp").width();
    //centering
    $("#popUp").css({
        "display" : "block",
        "position": "absolute",
        "top": windowHeight / 2 - popupHeight / 2,
        "left": windowWidth / 2 - popupWidth / 2
    });

}