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.
.. sitio ...
a continuación vamos a ver un ejemplo práctico de como funciona.
EL HTML
El codigo HTML es muy simple:
Contenido, que a su vez puede contener otros DIVS
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
#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:
#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
Hola amigo… muy buena tu explicacion!! mira, mi pregunta es… todo hasta aqui va muy bien… pero mi problema es que cuando quiero colocar divs dentro del div wrapp, todos estos se corren hacia un lado y no guardan las posiciones que les coloco. mas o menos esto es lo que hago:
<body bgcolor=”">
<div id=”wrap”>
<div id=”apDiv1″><img src=”fondo.jpg” alt=”" /></div>
<div id=”apDiv2″><img src=”parte 1.jpg” alt=”" /></div>
</div>
</body>
y el codigo css… es este…
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
#apDiv2 {
position:absolute;
width:200px;
height:115px;
z-index:2;
}
Necesito ayuda con esto… porque en todos lados explican como hacer para centrar, pero no dicen como maquetar lo que va dentro y que quede dentro de lo centrado…! gracias! espero su respuesta que esten bien! muchas gracias!
Hola Héctor,
en el CSS de tu caso, faltaría agregar los atributos para el div “wrap”. Quedaría así:
#wrap{
width: 960px;
margin: 0 auto 0 auto;
text-align: left;
}
body{
text-align: center;
}
Probalo y contá como te fué
salu2!