Ver Mensaje Individual
  #4 (permalink)  
Antiguo 25/03/2015, 15:38
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: centrar un div verticalmente

Hay maneras de hacer con CSS lo que pretendes, pero ya que preguntas en el foro de JavaScript, yo lo haría así:

Código Javascript:
Ver original
  1. var div = document.querySelector("#id del elemento"),
  2.     divWidth, divHeight, winWidth, winHeight,
  3.     centrar = function(){
  4.         divWidth = parseInt(getComputedStyle(div).width);
  5.         divHeight = parseInt(getComputedStyle(div).height);
  6.         winWidth = this.innerWidth;
  7.         winHeight = this.innerHeight;
  8.        
  9.         div.style.top = (((winHeight / 2) - (divHeight / 2)) + this.scrollY) + "px";
  10.         div.style.left = (((winWidth / 2) - (divWidth / 2)) + this.scrollX) + "px";
  11.     };
  12.  
  13. window.addEventListener("load", centrar, false);
  14. window.addEventListener("resize", centrar, false);

Lo que hago es simple. Tomo al elemento a centrar, declaro algunas variables que usaré más adelante y una función con la cual centraré al elemento en cuestión. En dicha función, tomo los valores computados del ancho y alto del elemento que centraré, así como el ancho y alto interno de la ventana (incluidas las barras de desplazamiento).

Enseguida, centro al elemento mediante las propiedades top y left, para lo cual, el elemento deberá de tener una posición absoluta para poder establecer una posición con respecto al elemento que lo contiene.

Para que quede alineado verticalmente, tomo la mitad de la altura de la ventana y la resto con la mitad de la altura del elemento a centrar, luego, a dicho resultado, le sumo la cantidad de píxeles desplazados por la barra de desplazamiento vertical (lee las notas de este enlace) y al resultado final, le concateno el prefijo 'px' para indicarle al navegador que desplazaré verticalmente N píxeles al elemento. Para el alineado horizontal, el proceso es similar, solo que con los valores a lo ancho.

DEMO

La función de centrado se ejecutará cada vez que cargue la ventana o esta sea redimensionada, por lo que el alineado será dinámico.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand