Si bien puede parecer un tema trivial centrar contenidos tanto de forma horizontal y sobre todo vertical suele despistar a muchos diseñadores web que utilizan CSS, vamos algunas formas de centrar contenidos con CSS.
Antes que nada aclaro un punto sobre el tema de utilizar HTML y CSS, la necesidad de estos debe realizarse de forma correcta y es separar el contenido que se contiene en HTML, del diseño que se aplica con CSS, por eso el uso de CSS y propiedades de diseño o presentación de forma inline esta mal aplicado.
Centrar Textos con CSS
Este es uno de los más sencillos y conocidos por todos pero suele cometerse el error de aplicar la propiedad inline y utilizar CSS dentro del HTML no es un método correcto y aconsejado.
Funciona pero está mal:
<p align="center">Texto centrado de forma incorrecta</p>
Forma correcta de hacerlo, es usar HTML:
<p class="claseparrafo">Texto que se centra con CSS</p>
y CSS por separado:
.claseparrafo {
text-align: center;
}
en la primera forma estamos mezclando HTML y CSS, eso no se debe hacer, los cambios de diseño se deben aplicar utilizando una Clase CSS a cada elemento HTML, tal como se muestra en el segundo ejemplo. Este es uno de los errores más típicos y también se comete cuando aplicamos cambios de fuentes como por ejemplo:
<p><font face="verdana" size="2" color="red">Texto en Verdana tamaño y 2 Rojo</font></p>
esto es de los 90, de la época que se maquetaba con tablas usando frontpage pero lamentablemente se sigue viendo en sitios nuevos.
Centrar Horizontal con CSS
En algunos casos se sigue viendo el maquetado web con tablas, web de dinosaurios, y no me refiero a enciclopedias de contenidos jurásicos, si no a que están hechas por dinosaurios que quedaron en el pasado y no aplican estándares web. En esos casos era normal ver
<table align="center">
lo que aplica diseño de forma inline y no es para nada aconsejable y para peor usando tablas como en los 90.
La forma correcta de centrar una página web es darle un ancho fijo al contenedor principal y margenes izquierdo y derecho automáticos, de esa forma se muestra al centro del navegador distribuyendo el margen izquierdo y derecho de forma automática.
Centrado Horizontal de contenido HTML
<body> <div id="principal"> </div> </body>
Centrado Horizontal del contenedor HTML con CSS
Ahora aplicamos con CSS un ancho fijo al DIV principal y margenes automáticos de la siguiente forma:
#principal {
width: 960px;
margin-left: auto;
margin-right: auto;
}
es importante recordar que para poder distribuir los margenes automáticamente el ancho debe ser fijo.
Centrado Vertical con CSS
Los casos que vimos hasta ahora son típicos y dominados por cualquier diseñador web actualizado y acostumbrado a utilizar CSS. En el caso del Centrado Vertical es donde nos ponemos un poco rebuscados.
La forma sencilla sería aplicar una propiedad, así como existe text-align podríamos usar vertical-align, pero esta propiedad está disponible en CSS 3 y no va bien en todos los navegadores. Luego veremos como aplicarlo en otros casos donde falta esta propiedad de alineación vertical, de forma un poco más rebuscada pero eficaz.
En primer lugar, así como para centrar horizontal necesitamos un ancho fijo, para alinear vertical necesitamos también una altura fija del contenedor principal y utilizar display: table y display: table-cell para el contenido y el vertical-align.
html, body {
height: 100%;
}
#main {
display: table;
height: 100%;
}
#content {
display: table-cell;
vertical-align: middle;
}
Si bien el contenedor principal es #main, y es a este que le aplicamos display: table; y alto 100%, el mismo se encuentra en el html y body de la página por tanto estos también deben tener alto 100%. Luego el contenido tiene display: table-cell; para que se comporte como una celda dentro del #main table, y vertical-align: middle; para que se centre verticalmente, con esto funciona en Firefox, Chrome, Opera e Internet Explorer 8.