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
:
Ver originalCentrarVentana($("#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!