Código CSS para centrar una web en pantalla

Código CSS para centrar una web en pantalla

Raro es ya ver una web que no esté centrada horizontalmente, por otro lado, existen webs de poca altura que en algunos casos nos interesa más, verlas centradas verticalmente en el monitor. Por otro lado una tendencia ya muy expandida es el uso de «pies de web«. Aquí os dejo algunos códigos CSS que espero os puedan servir en vuestros próximos diseños para solucionar estos conceptos.

  1. CENTRADO HORIZONTAL DE LA WEB – Hace tiempo que las webs empezaron a diseñarse centradas, en lugar de pegadas al margen izquierdo de la pantalla. Este es el código que se usa en el contenedor para centrar una web de ancho fijo en la pantalla.
    div # contenedor (margin: 0 auto; )

     

  2. CENTRADO VERTICAL DE LA WEB – En este caso, la solución es un poco más laboriosa. Se trata de de fijar el margin-left y el margin-top de la web, teniendo en cuenta el ancho y alto de la web. Por supuesto que esto no sirve de nada para una web con alto dinámico (cosa que sucede en la mayoría de los casos). Suponiendo que tenemos una web de 800px de ancho y 500 de alto, este sería el método para centrarla verticalmente.
    { height:500px; width:800px; position: absolute; top: 50%; left: 50%;margin-top: -250px; margin-left: -400px;}

     

  3. PIE DE WEB– Una de las últimas aportaciones en el diseño web,  ha sido el incorporar el pie al final de la página, llegando a ser muchas veces un instrumento de navegación.
    En la página:
    <html>
    <body>
    <div id=»nonFooter»>
    <div id=»content»>
    </div>
    </div>
    <div id=»footer»>
    </div>
    </body>
    </html>

    CSS:
    html
    {
    height: 100%;
    }
    body
    {
    height: 100%;
    }
    #nonFooter
    {
    position: relative;
    min-height: 100%;
    }
    * html #nonFooter
    {
    height: 100%;
    }

Share and Enjoy !

Shares