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 originalvar div = document.querySelector("#id del elemento"),
divWidth, divHeight, winWidth, winHeight,
centrar = function(){
divWidth = parseInt(getComputedStyle(div).width);
divHeight = parseInt(getComputedStyle(div).height);
winWidth = this.innerWidth;
winHeight = this.innerHeight;
div.style.top = (((winHeight / 2) - (divHeight / 2)) + this.scrollY) + "px";
div.style.left = (((winWidth / 2) - (divWidth / 2)) + this.scrollX) + "px";
};
window.addEventListener("load", centrar, false);
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