JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<div class="cont">

    <div class="cont">
              <div>
        <div class="dialog">
        </div>
    </div>
    </div>
</div>
</div>

<div style="z-index: 20; background: red; width: 100px; height: 500px; top: 0; left: 167px; position: absolute;">fdasfsdf</div>

CSS

.cont {margin: 60px 100px; background: rgba(100,120,250, 0.1); border: 2px solid red; position: relative; height: 500px; left: -50px; z-index: 1;}
.dialog {position: absolute; background: green; width: 20px; height: 20px; top: 50%; left: 50%; z-index: 9999;}

.cont .cont {left: 200px; background: yellow; /*overflow: hidden;*/}

JavaScript

jQuery.fn.center = function() {
    var offset = {},
        parent = this.offsetParent();

        offset.x = $(parent).offset().left / 2;
        offset.y = $(parent).offset().top / 2;


    this.css({
        "margin-left": -offset.x - this.width() / 2 + 'px' ,
        "margin-top":  -offset.y -  this.height() / 2 + 'px'
    });

    return this;
};

$('.dialog').center();