Es común querer centrar nuestra página web horizontalmente, para que no quede toda alineada a la izquierda dejando un enorme espacio vacío en el lado derecho, cada día más notable por los monitores panorámicos de cada vez más pulgadas.
Ocurre que no existe ningún atributo que haga alinearse a los elementos al centro. Podremos centrar texto, sí, pero no una caja con la facilidad con la que podemos hacerlo a la izquierda o la derecha.
Para ello, se utiliza un truco que luego pasaremos a explicar, os muestro un fragmento de código de una DIV y su correspondiente estilo:
<style type="text/css">
.centrada {margin: 0 auto; width: 800px;}
</style>
</head>
<body>
<div class="centrada">
<p>Este contenido está en una DIV centrada</p>
</div>
Bien, la explicación es sencilla. Como podemos ver en el ejemplo, nuestra capa tiene como mínimo dos elementos obligatorios: «margin» (margen) y «width» (anchura).
El motivo no es otro que obligar a nuestra DIV a que tenga valor «auto» (automático) para sus márgenes izquiero y derecho, de este modo, ambos tendrán el mismo y asíconseguiremos que nuestra DIV quede centrada, no por alineación, sino porque debe estar a la misma distancia de ambos flancos de nuestra pantalla.
Para que esto sea efectivo hay que especificarle un «width» (ancho). Por otro lado, podremos añadir más elementos al CSS de nuestra DIV, como un «border«, un «background» o lo que queramos siempre y cuando no afecten a la posición de nuestra DIV.