miércoles, 10 de agosto de 2011

Centrar DIV en la pantalla (scroll)

Para centrar un DIV en pantalla podemos crearnos el siguiente class css:
.divCentrado
{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 600px; /*ANCHO DEL DIV DESEADO*/
      height: 400px; /* ALTO DEL DIV DESEADO*/
      margin-top: -200px; /* MITAD DE LA ALTURA*/
      margin-left: -300px; /* MITAD DE LA ANCHURA*/
}
En el caso en el que tuvieramos scroll en la pantalla y que el usuario puediera encontrarse verticalmente en cualquier posición, podemos tener en cuenta el scroll con la siguiente función (válido para multitud de exploradores):

function scrollTop(){

    if(window.pageYOffset){
        return window.pageYOffset;
     }
     else {
        return  Math.max(document.body.scrollTop,document.documentElement.scrollTop);
     }

}       

function centrarDIV(idDIV)
{
     var ypos = (screen.availHeight/4)
     idDIV.style.top = (scrollTop()+ypos) + 'px';
}

No hay comentarios:

Publicar un comentario en la entrada