somosespartanos

Saludos espartanos,

Un problema recurrente en el diseño web es cómo centrar correctamente el contenido de una página. Hay en la red infinidad de códigos (la mayoría utilizando css 2.1) que prometen dicha funcionalidad, pero, al menos los que yo me he encontrado, tenían sus defectos.

La idea es tener una capa DIV, a la que se suele llamar wrapper, que contiene al resto de capas. El objetivo es centrarla:

• Como punto de partida, en Cristalab hay un tutorial de cómo centrar un DIV horizontalmente, que funciona fenomenal.
  • Problema: No centra verticalmente.

• Se puede jugar con left, top y márgenes negativos para centrar un div.
  • Así, podríamos utilizar un css como éste

    #wrapper {
        width:960px; /* ancho del div */
        height:560px; /* alto del div */
        left:50%;
        top:50%;
        margin-left:-480px; /* ancho/2 del div */
        margin-top:-280px; /* alto/2 del div */
    }

  • Problema 1: Si las dimensiones de la capa son mayores a las de la ventana del navegador, quedarán zonas del div que no serán accesibles (culpa de los margenes negativos).
    • Podeis ver un ejemplo aquí. Redimensionad la ventana del navegador, recargad la página y comprobad como se pierde parte del objeto flash por arriba e izquierda.
  • Problema 2: No funciona para dimensiones en porcentajes.
• Por javascript podemos detectar la resolución del navegador e importar uno u otro css dependiendo de ésta.
  • Problema: Necesitamos varios archivos css.

El problema de fondo es el enfoque. Nosotros queremos centrar una capa cuando ésta tenga MENORES DIMENSIONES que la ventana del navegador. Así, mediante javascript, podemos reutilizar la segunda idea para centrar la capa cuando lo necesitemos:

(esto es pseudocodigo)

if (anchoNavegador > anchoCapa){
    "centrar wrapper horizontalmente"
}
if (altoNavegador > altoCapa){
    "centrar wrapper verticalmente"
}

Ya solo quedaría considerar el caso en el que las dimensiones de la capa se definan por porcentajes. Si fuese así, la comparación en vez de ser “menor-que” sería “menor-o-igual-que”. Como a priori no podemos saberlo, aplicamos un corrector (-1) para considerar ambos casos.
Pues bien, considerando todo lo anterior e incluyéndolo en un .js bonito, el código para centrar una capa que contenga a la página sería:

function centrarWrapper (){
    var correctorPercent = 1;//En caso de definir las dimensiones del wrapper en porcentajes.
    if (window.innerWidth > document.getElementById('wrapper').offsetWidth - correctorPercent){
        document.getElementById('wrapper').style.left = '50%';
        document.getElementById('wrapper').style.marginLeft = (-1) * document.getElementById('wrapper').offsetWidth / 2 + 'px';
    }
    if (window.innerHeight > document.getElementById('wrapper').offsetHeight - correctorPercent){
        document.getElementById('wrapper').style.top = '50%';
        document.getElementById('wrapper').style.marginTop = (-1) * document.getElementById('wrapper').offsetHeight / 2 + 'px';
    }
}

Y llamaríamos a la funcion DESPUÉS de haber declarado el div wrapper. Considerar que a dicha capa se le debe asignar su respectivo width y height para que todo funcione bien.

Podemos ver un ejemplo funcionando en www.ambienteypaisajes.com.

Si quereis el código, descargarlo acá. El js contiene instrucciones mas detalladas.

Un saludo gente y espero un buen testeo y críticas por vuestra parte ;),

Mon.