Centrar un sitio horizontalmente usando CSS
¿QUE ES UN WRAPPER?
Para lograr centrar un sitio horizontalmente lo primero que hay que hacer es un DIV que englobe a todo el sitio y que generalmente se lo llama “wrapper” (contenedor en inglés) aunque el nombre cada uno lo pone como quiere, es preferible seguir siempre un cierto orden para que sea más fácil de interpretar cuando se lee el código, es decir, cuando uno lee “wrapper” ya se está dando la idea de lo que es. Básicamente el Div llamado wrapper contiene a toda la web (de ahí su nombre) y la gran ventaja es que al modificar sus propiedades estás modificando en definitiva las propiedades de todo el sitio.
1 2 3 | <div id="wrapper"> .. sitio ... </div> |
a continuación vamos a ver un ejemplo práctico de como funciona.
EL HTML
El codigo HTML es muy simple:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es" > <head> <title>prueba</title> <link rel="stylesheet" href="estilos.css" type="text/css" /> </head> <body> <div id="wrapper"> Contenido, que a su vez puede contener otros DIVS </div> </body> </html> |
En las primeras líneas se declara el documento con el tag DOCTYPE, que lo que hace es “decirle” al navegador que versión de (x)HTML se usa en el sitio de manera que éste sepa que sintaxis y gramática se usa; y en la línea 5 se agrega la hoja de estilos.
Como se vé, el div wrapper casi siempre comienza luego de body y termina antes de /body de modo que contenga a toda la página.
EL CSS
1 2 3 4 | #wrapper{ margin: 0 auto 0 auto; width: 200px; } |
Con estas pocas líneas estamos centrando al wrapper horizontalmente. Siendo el primer 0 el margin-top y el segundo 0 el margin-bottom. Si quisiéramos que nuestro div se encuentre centrado horizontalmente pero 10 píxeles más abajo tendríamos que poner margin: 10px auto 0 auto;
Pero como Internet Explorer es una basura a lo que CSS se trate, este código no resulta correcto (hagan la prueba) y el div continúa sin centrarse. Por el contrario, en navegadores que respetan un poco más los estándares, como Mozilla Firefox, Opera, Chrome, esté código CSS basta.
Lo mejor en este caso es hacer un pequeño “arreglo” para que Internet Explorer pueda entender lo que queremos hacer. El archivo estilos.css quedaría de esta manera:
1 2 3 4 5 6 7 8 9 10 11 | #wrapper { margin: 0 auto 0 auto; width: 200px; text-align: left; background: #eee; //Agrego un fondo gris para visualizar mejor como quedó centrado el div } body { text-align: center; } |
En Internet Explorer 7 y superiores solamente con colocar el text-align:left; en el wrapper basta, pero para asegurarse es mejor poner el text-align: center; en el body porque funciona aún en sus versiones anteriores. Si colocamos en el body el texto centrado, si o si vamos a tener agregar al wrapper un text-align:left porque de lo contrario, todo lo que está en wrapper iría centrado (ya que es “hijo” de body).
Noten que el código se hizo doblemente más grande ( de 4 líneas a 8 ) solamente porque Internet Explorer no funciona como debería 
resultado final
