Centrado de objetos

Una tarea común para el CSS es el centrado de texto o imágenes. De hecho, existen tres clases de centrado:

• Centrado de líneas de texto
• Centrado de un bloque de texto o una imagen
• Centrado vertical de un bloque o una imagen

Centrado de líneas de texto

La forma de centrado más común y (por eso mismo) más fácil, es el centrado de líneas de texto en un párrafo o en un encabezado. A tal fin, CSS incluye la propiedad "text-align":

P { text-align: center }
H2 { text-align: center }

Las reglas anteriores, centran cada línea de un elemento P o H2 entre sus márgenes, así:

Centrado de un bloque o una imagen

A veces lo que tiene que aparecer centrado no es el texto, sino un bloque entero. O, por decirlo de otro modo: deseamos que los márgenes izquierdo y derecho sean iguales. La forma de hacerlo es configurar los márgenes en "auto". Esto normalmente se usa con un bloque de ancho fijo, porque si el bloque en sí es de ancho flexible, sencillamente se apropiará de todo el espacio disponible. Veamos un ejemplo:

P.blocktext {
	margin-left: auto;
	margin-right: auto;
	width: 6em
}
...
<P class="blocktext">Este bloque...

Este mismo método se utiliza para centrar una imagen: la convertimos en un bloque separado y le aplicamos las propiedades de márgenes. Por ejemplo:

IMG.displayed {
	display: block;
	margin-left: auto;
	margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

Centrado vertical

CSS nivel 2 no tiene una propiedad para el centrado vertical de objetos. Es probable que exista en CSS nivel 3. Pero incluso con CSS2 es posible centrar bloques verticalmente, mediante la combinación de unas pocas propiedades. El truco consiste en indicar que el bloque exterior sea formateado como celda de tabla, porque los contenidos de celdas sí se pueden centrar verticalmente.

El ejemplo siguiente centra un párrafo dentro de un bloque de altura dada. Un ejemplo separado muestra un párrafo centrado verticalmente en la ventana del navegador, ya que está dentro de un bloque de posición absoluta que tiene la misma altura de la ventana.

DIV.container {
	min-height: 10em;
	display: table-cell;
	vertical-align: middle }
...
<DIV class="container">
  <P>Este pequeño párrafo...
</DIV>