JSFiddle - React, Tailwind, and code Playground

by araque

HTML

<div class="container">
    <div class="popup">epepep</div>
</div>

CSS

.container {
    height: 500px;
    width: 100%;
    background-color: #cccccc;
    margin-top: 100px;
    text-align: center;
    position: absolute;
}

.popup {
    background-color: red;
    width: 70%;
    height: 200px;
    margin-left: 15%;
    position: absolute;
}

JavaScript

function positionate() {
    var popupH = $('.popup').height(),
        containerH = $('.container').height(),
        containerOffset = $('.container').offset().top,
        windowH = $(window).height();
        windowOffset = $(window).scrollTop();
        
    if (popupH && containerH) {
   
        
        var top = (windowH / 2) - (popupH / 2) + windowOffset - containerOffset;
        
        console.log(top);
        
        top = (top < 0) ? 0 : top;
        top = ((top + popupH) > containerH) ? (containerH - popupH) : top;
        
        $('.popup').css("top", top);
        console.log("top: " + top + ", window: " + windowH + ", popup: " + popupH + ", containerOffset: " + containerOffset + ", windowOffset: " + windowOffset);
        
    }
}

positionate();