Página HMTL centrada horizontal y verticalmente
Patxi Echarte,
13. Sep, 2005,
4 Comentarios
CSS, JavaScript
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.
Que tal una capa contenedora con posición absoluta y ancho fijo a la que le aplicas el siguiente css:
#contenedora {
width: 700px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin: -200px auto -350px auto;
}
Supongo que querrías poner «margin: -200px -350px auto auto», en cualquier caso esta es una de las cosas que he visto publicadas en algunos sitios y que no funciona, al menos no a mi en Explorer 6 o Firefox 1.0.6.
Cambiando esa línea por «margin: -200px -350px;» (problemas del auto;)) sí que me funciona, sin embargo da algunos problemas en otras versiones y tiene ademas una pega (al menos para lo que yo suelo pretender), que es que cuando la ventana es más pequeña que el tamaño de nuestra capa, la esquina superior izquierda queda fuera de visión y no se puede acceder a ella. Lo que a mi me suele interesar es que en esos casos la esquina superior izquierda siempre quede visible anclada en la esquina del navegador y que para ver el resto de la página no visible, se pueda utilizar el scroll.
¡Gracias! Funciona genial, y me traía de cabeza, porque siempre se me comía un trocito de arriba al hacer scroll en una pantalla pequeña.
Mil gracias por tu aportación!!