JSFiddle - React, Tailwind, and code Playground

HTML

<div style="postion: relative; display:block; height: 100%; width: 100%;" >
    <div id="c" >c</div>
    <div id="b" >b</div>
    <div id="a" >a</div>
</div>

CSS

#a{
 display: block;
 height: 100px;
 width: 200px;
 position: absolute;
 background: #00f;
}
#b{
 display: block;
 height: 200px;
 width: 400px;
 position: absolute;
 background: #0f0;
}
#c{
 display: block;
 height: 300px;
 width: 600px;
 position: absolute;
 background: #f00;
}

JavaScript

$(window).resize(function(){
    win_width = $(window).width();
    win_height = $(window).height();
    $('div').each(function(){
        $(this).css({
            'left' : (win_width - $(this).width()) / 2,
            'top': (win_height - $(this).height()) / 2
        });
    })
});
            
$(window).trigger('resize');