JSFiddle - React, Tailwind, and code Playground

HTML

<div class="anotherDiv">
    <div class="popupContent">popupContent</div>
</div>
<br />
<div class="anotherDiv">
    <div class="popupContent">popupContent</div>
</div>

<div class="another">popupContent</div>

CSS

.popupContent, .another{border:solid black 1px;padding:5px;}
.anotherDiv {position: relative; top: 80px; left: 200px; height: 50px; width: 200px; background-color: blue}

JavaScript

$.fn.centerInParnt = function () {
    this.css("position","absolute");
    this.css("top", (this.parent().innerHeight()/2) - (this.outerHeight()/2)+"px");
    this.css("left", (this.parent().innerWidth()/2) - (this.outerWidth()/2)+ "px");
    return this;    
    
}
    
$.fn.centerInWindow = function () {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
}
    
    
$(".popupContent").centerInParnt();

$(".another").centerInWindow();