JSFiddle - React, Tailwind, and code Playground

HTML

<div id="popupContainerFixed">
    <div id="popupContainer">
        
            
       <div id="popup">
           <h1>Dynamic sized Popup</h1>
           <p>which is centered useing vertical-align and display:table-cell to align the popup vertically... <br>Javascript simply resizes the popupContainer</p>
        </div>
        
    </div>
</div>

CSS

#popupContainerFixed{
    position: fixed;
    left:0px;
    top:0px;
}
#popupContainer {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
        
}
#popup {
    background-color: #ccc; 
    margin:0 auto;
    display:inline-block;
}

JavaScript

function resizePopup() {
    $("#popupContainer").css({
        height:$(window).height(),
        width:$(window).width()
    });
}
$(function() { resizePopup(); });
$(window).resize(function() { resizePopup(); });