Centrar y fijar DIV con javascript

[Alexis88]

Si quieres que el elemento quede centrado incluso cuando se mueve la barra de desplazamiento, tienes que trabajar con el evento scroll. Una forma efectiva de centrar elementos es la siguiente:

Código Javascript:

var elem = document.getElementById("id del elemento"), //El elemento
    elemWidth = elem.offsetWidth, //Ancho del elemento
    elemHeight = elem.offsetHeight, //Alto del elemento
    winWidth = window.innerWidth, //Ancho de la ventana
    winHeight = window.innerHeight, //Alto de la ventana
    winX = window.scrollX, //Cantidad desplazada horizontalmente (scroll)
    winY = window.scrollY; //Cantidad desplazada verticalmente (scroll)
        
elem.style.marginTop = (winHeight / 2 - elemHeight / 2) + winY + "px"; //Centrado vertical
elem.style.marginLeft = (winWidth / 2 - elemWidth / 2) + winX + "px"; //Centrado horizontal
 

Y para que tenga efecto tanto al cargar el documento como al producirse el scroll, hay que tener este script en una función que se ejecute cuando se produzcan los eventos DOMContentLoaded (carga del DOM) y scroll:

Código Javascript:

function centrar(){
    var elem = document.getElementById("id del elemento"), //El elemento
        elemWidth = elem.offsetWidth, //Ancho del elemento
        elemHeight = elem.offsetHeight, //Alto del elemento
        winWidth = window.innerWidth, //Ancho de la ventana
        winHeight = window.innerHeight, //Alto de la ventana
        winX = window.scrollX, //Cantidad desplazada horizontalmente (scroll)
        winY = window.scrollY; //Cantidad desplazada verticalmente (scroll)
        
    elem.style.marginTop = (winHeight / 2 - elemHeight / 2) + winY + "px"; //Centrado vertical
    elem.style.marginLeft = (winWidth / 2 - elemWidth / 2) + winX + "px"; //Centrado horizontal
}
 
document.addEventListener("DOMContentLoaded", centrar, false);
window.addEventListener("scroll", centrar, false);
 

DEMO

Un saludo