Alinear texto al centro con CSS

En las primeras versiones del HTML existía el atributo align, el cual, mediante diferentes valores nos permitía alinear el texto a la izquierda, centro o derecha. Con la llegada de las hojas de estilo CSS este atributo se convierte en obsoleto y la alineación pasa a ser controlada por atributos CSS. En este ejemplo vamos a ver cómo podemos alinear texto al centro con CSS. La propiedad CSS que nos permite alinear el texto es text-align. Dicha propiedad la podemos aplicar a los diferentes elementos HTML que gestionen bloques: cabeceras, párrafos, capas,… La sintaxis de la propiedad text-align es la siguiente:

text-align : start | end | left | right | center | justify | match-parent | justify-all

Así, los valores que puede tomar text-align son:

• justify, Justifica el contenido dentro de la caja de todas las líneas excepto de la última.
• justify-all, Justifica el contenido dentro de la caja de todas las líneas incluida la última.
• match-parent, Acepta la alineación que tenga el elemento padre.
• end, Atiende a la dirección del texto. Si es un texto izquierda-derecha lo alinea a la derecha y si es un texto derecha-izquierda lo alinea a la izquierda.
• center, Centra el texto dentro de la caja.
• left, Alinea el texto a la izquierda de la caja.
• start, Atiende a la dirección del texto. Si es un texto izquierda-derecha lo alinea a la izquierda y si es un texto derecha-izquierda lo alinea a la derecha.
• right, Alinea el texto a la derecha de la caja.

En el caso de querer alinear texto al centro con CSS deberemos de utilizar el valor center. Así, por ejemplo, lo podemos aplicar a una cabecera. Lo primero que tendremos que hacer es definir una hoja de estilo en la cabecera de la página

h2.center {
  text-align: center;
}

Luego simplemente deberemos de utilizar la clase center dentro de un elemento h2. Para ello utilizamos el atributo class.

<h2 class="center">Cabecera centrada</h2>

Espero que os haya servido de ayuda este sencillo ejemplo para alinear texto al centro con CSS.