JSFiddle - React, Tailwind, and code Playground

by LucasKauz

HTML

<div id="container">
        <div class="filho">
            lorem ipsum dolor
        </div>
    </div>

CSS

html,
body,
#container{
    width: 100%;
    height: 100%;
}

#container{
    text-align: center;
    background: #f00;
    position: relative;
    
}

#container .filho{
    background:#0f0;
    width:30%;
    position: absolute;
    top:50%;
    left: 50%;
    
}

JavaScript

$(function(){
    filhoAnimate();
    
    $(window).resize(function(){
        filhoAnimate();
    });
})

function filhoAnimate(){
    var w = $('.filho').width();
    var h = $('.filho').height();
    
    $('.filho').stop().animate({
        'margin-left': -(w/2),
        'margin-top': -(h/2)
    },100);
}