JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div class="container">
<p class="one" style="width: 100%!important; height: 100px!important; background: green;"></p>
<p class="two" style="width: 100%!important; height: 100px!important; background: red;"></p>
    <div class="target">1<br>parent</div>
</div>

CSS

div.container{
    width: 300px;
    height: 300px;
    border: 1px solid #555;
    position: relative;
    top: 10px;
    left: 10px;
}

div.target{
    width: 50px;
    height: 50px;
    color: white;
    background: rgba(30, 30, 30, 0.7);
    border-radius: 10px;
    text-align: center;
    position: absolute;
}

JavaScript

jQuery.fn.center = function(parent) {
if (parent) { parent = this.parent(); } 
else { parent = window; }
this.css({ "top": ((($('.one').height() - this.outerHeight()) / 2) + $('.one').scrollTop() + "px") });
return this;
}
$("div.target").center(true);