JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mydiv1">
    <div id="mydiv2">
        <p>Middle of Middle :)</p>
    </div>
</div>

CSS

#mydiv1 {
    height:100px;
    width:80%;
    background-color:green;
    position:absolute;
}
#mydiv2 {
    height:50px;
    width:30%;
    background-color:blue;
    position:absolute;
    text-align:center;
    color:#FFF;
}

JavaScript

function SetWidthAndHeight(getelement) {
    var winH = $(window).height();
    var winW = $(window).width();
    getelement.css('top', winH / 2 - getelement.height() / 2);
    getelement.css('left', winW / 2 - getelement.width() / 2);
}
function SetCenterOfAreDiv(ele,from) {
    var winH = from.height();
    var winW = from.width();
    ele.css('top', winH / 2 - ele.height() / 2);
    ele.css('left', winW / 2 - ele.width() / 2);
}
$(function () {
    // on change orientation
    window.addEventListener("orientationchange", function () {
        SetWidthAndHeight($('#mydiv1'));
        SetCenterOfAreDiv($('#mydiv2'),$('#mydiv1'));
    }, false);
    // on change resize
    window.addEventListener("resize", function () {
        SetWidthAndHeight($('#mydiv1'));
        SetCenterOfAreDiv($('#mydiv2'),$('#mydiv1'));
    }, false);
});

SetWidthAndHeight($('#mydiv1'));
SetCenterOfAreDiv($('#mydiv2'),$('#mydiv1'));