Página HMTL centrada horizontal y verticalmente

Es habitual en algunos diseños web que la pantalla se mantenga a un ancho y alto fijo centrada en el navegador del usuario. Esto es relativamente sencillo hacerlo con HTML, pero la cosa cambia si queremos hacerlo con CSS. Con el centrado horizontal no hay problema, ya que es suficiente con dar una anchura a la capa que representa el contenido de la página y poner en su margin 0 auto, sin embargo con el centrado vertical la cosa cambia. Si lo has intentado alguna vez lo primero que habrás hecho seguramente será sustituir el 0 auto anterior por un auto y habrás comprobado que no funciona. De hecho hay multitud de trucos que intentan resolver este problema, pero ninguno lo consigue del todo.

Una posible solución, que a mi entender es bastante buena, se basa en la utilización de una capa con posicionamiento absoluto que se ubica en la pantalla mediante JavaScript. Al lanzarse los eventos onload y onresize se llama a una función (positionIt) que se encarga de obtener las dimensiones de la capa que hay que centrar (divCentrado) y configurar sus valores left y top, para lo cual a su vez necesita obtener el tamaño disponible en el navegador del usuario, lo cual lo hace mediante las funciones getViewportWidth y getViewportHeight.

Usuarios que han visto este tema también han visto...

- Mejorando la apariencia de los formularios utilizando hojas de estilo
- Maquetar con CSS usando X columnas
- Crear menus de navegación en CSS usando listas
- Evita sobrecargar tus archivos CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento