Centrar DIV horizontal en CSS

Éste tutorial tiene como objetivo, explicar cómo centrar todo el diseño de una web horizontalmente.

Nota: Para éste tutorial necesitas tener previos conocimientos sobre XHTML y CSS.

<div id="wrap">

Crearemos un div con el id wrap alrededor de todo el contenido de la página. Recuerde que puede cambiar el id por cualquier otro nombre que ústed desee, o le parezca conveniente.

Tendriamos algo como ésto.

CSS

Para que el #wrap centre el contenido utilizaremos CSS.

Utilizaremos margenes automáticos para centrar el div, y recuerde que éste debe tener un tamaño, ya sea en pixeles, em o porcentajes.

#wrap { margin:0 auto 0 auto; width:390px; }

Éste código deberá funcionar en los browsers actuales que sigan las recomendaciones estándar de la W3C. Pero, IE 6 y anteriores, no reconoce éste código, por lo que tendremos que recurrir a un hack, utilizaremos text-align:center; para ésto. Éste error será corregido en el IE7.

body { text-align:center; }

Por inercia, todo código de estilo CSS que se utilice en el XHTML, el contenido hijo hereda éstos estilos. En otras palabras, tódo el contenido será centrado, por lo que volveremos a utilizar text-align, pero ésta ves centrando todo el contenido de #wrap hacia la izquierda (o también podria ser hacia la derecha, dependiendo mucho de su diseño).

#wrap { margin:0 auto 0 auto;
width:390px; text-align:left; }

Tendriamos algo como ésto.

Agregando pequeños detalles

Para mejor visualización de éste ejemplo, agregué la fuente verdana, un poco de padding, y un borde rojo.

Al final, tendriamos ésto.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo