[APORTE] Simple funcion de centrar elementos

[TrinityCore]

Buenas gente, espero esten bien.

Bueno, he creado dos funciones para poder centrar elementos.

Una centra un elemento al centro de la pantalla y la otra, centra el elemento al centro de otro elemento deseado.

CentrarVentana() lleva 2 parametros, primero el objeto y luego el tipo de position

CentrarEnVentana() lleva 5 parametros, primero el objeto principal, segundo el objeto que estara dentro del objeto principal, tercero la Position, cuarto top, bottom o center y por ultimo right, left o center

De esta manera, centrando un contenedor dentro de otro, podremos decirle si queremos que este centrado, arriba y a la izquierda etc... eso sera a gusto.

Aqui esta:

Código Javascript:

CentrarVentana($("#miobjeto1"), 'fixed');
CentrarEnVentana($("#miobjeto1"), $("#miobjeto2"), 'fixed', 'center', 'center');
 
function CentrarVentana(objeto, option){
    //-----> Ancho y Alto del objeto.
    var AnchoObjeto = objeto.width();
    var AltoObjeto = objeto.height();
 
    //----> Ancho y Alto del navegador.
    var AnchoNavegador = $(window).width();
    var AltoNavegador = $(window).height();
 
    //----> Posicion X-Y del objeto.
    var PosicionX = (AnchoNavegador / 2) - (AnchoObjeto / 2);
    var PosicionY = (AltoNavegador / 2) - (AltoObjeto / 2);
    
    //----> Propiedades CSS del objeto.
    if(option == "fixed" || option == "absolute" || option == "relative"){
        objeto.css({"position":""+option+"", "left":PosicionX+"px", "top":PosicionY+"px"});
    }else{
        objeto.css({"position":""+option+"", "margin-left":PosicionX+"px", "margin-top":PosicionY+"px"});
    }
}
 
function CentrarEnVentana(objeto1,objeto2,option,y,x){
    //-----> Ancho y Alto del objeto2.
    var AnchoObjeto = objeto2.width();
    var AltoObjeto = objeto2.height();
 
    //----> Ancho y Alto del objeto1.
    var AnchoContenedor = objeto1.width();
    var AltoContenedor = objeto1.height();
 
    //----> Posicion X-Y del objeto2.
    var PosicionX = (AnchoContenedor / 2) - (AnchoObjeto / 2);
    var PosicionY = (AltoContenedor / 2) - (AltoObjeto / 2);
 
    //----> Mandar dentro del objeto1.
    var PosX = objeto1.position();
    PosX = PosX.left;
    PosicionX = PosX + PosicionX;
 
    var PosY = objeto1.position();
    PosY = PosY.top;
    PosicionY = PosY + PosicionY;
 
    //----> Propiedades CSS del objeto2.
    if(option == "fixed" || option == "absolute" || option == "relative"){
 
        if(y == 'top'){
            objeto2.css({"top":PosY+"px"});
        }else if(y == 'bottom'){
            objeto2.css({"top":(PosY + AltoContenedor) - (AltoObjeto)+"px"});
        }else{
            objeto2.css({"top":PosicionY+"px"});
        }
 
        if(x == 'left'){
            objeto2.css({"left":PosX+"px"});
        }else if(x == 'right'){
            objeto2.css({"left":(PosX + AnchoContenedor) - (AnchoObjeto)+"px"});
        }else{
            objeto2.css({"left":PosicionX+"px"});
        }
        objeto2.css({"position":""+option+""});
    }else{
        if(y == 'top'){
            objeto2.css({"margin-top":PosY+"px"});
        }else if(y == 'bottom'){
            objeto2.css({"margin-top":(PosY + AltoContenedor) - (AltoObjeto)+"px"});
        }else{
            objeto2.css({"margin-top":PosicionY+"px"});
        }
 
        if(x == 'left'){
            objeto2.css({"margin-left":PosX+"px"});
        }else if(x == 'right'){
            objeto2.css({"margin-left":(PosX + AnchoContenedor) - (AnchoObjeto)+"px"});
        }else{
            objeto2.css({"margin-left":PosicionX+"px"});
        }
        objeto2.css({"position":""+option+""});
    }
}
 

Es solo un pequeño e insignificante aporte para no tener que programar a cada rato cuando queremos centrar un elemento en pantalla u otro dentro de otro.

Espero que a alguien le sirva, saludos!