JSFiddle - React, Tailwind, and code Playground

by Geo Morillo

HTML

<div id="midiv"></div>

CSS

div{
    background:blue;
    width:200px;
    height:100px;
}

JavaScript

posicionar("#midiv");
    $(window).on("resize", function() {
        posicionar("#midiv");   
    });
    
    function posicionar(elemento){
        var altoDocumento = $(window).height();//alto
        var anchoDocumento = $(window).width();//ancho
    
        var centroXDocumento = anchoDocumento / 2;
        var centroYDocumento = altoDocumento / 2;

        var altoElemento = $(elemento).outerHeight(true);//ancho real del elemento
        var anchoElemento = $(elemento).outerWidth(true);//alto 

        var centroXElemento = anchoElemento / 2;// centro x del elemento
        var centroYElemento = altoElemento / 2; // centro y del elemento

        var posicionXElemento = centroXDocumento - centroXElemento;
        var posicionYElemento = centroYDocumento - centroYElemento;
        
        $(elemento).css("position","absolute");
        $(elemento).css("top", posicionYElemento);
        $(elemento).css("left", posicionXElemento);
    }