Cómo centrar el texto con css y sin usar html

Gracias a css disponemos de una gran variedad de formas para centrar el texto de una etiqueta html ya sea alineandolo con la propiedad text-align, o centrandolo dentro del elemento html con propiedades css como flexbox y grid.

1. aliner al centro el título de un elemento hmtl

Para este ejemplo vamos a usar como tiutlo una etiqueta <h1> que por defecto viene con el texto alineado hacia la izquierda para centrarlo solo agregamos la siguiente propiedad a nuestro códigocss.

Copiarcss
h1 {
  text-align: center;
}

Este código también aplica para alinear el texto de cualquier etiqueta html como p div o footer.

2. Centrar el texto de un div horizontalmente

Para centrar el texto de un div horizontalmente usaremos css flexbox, para este ejemplo necesitaremos crear un div y agregarle algo de contenido.

Copiarhtml
<div>
  <h2>Este es el elemento que centraremos</h2>
</div>

Copiarcss
div {
  display: flex;
  justify-content: center;
}

Agregando la propiedad display: flex convertimos el div en un elemento flexible y con la propiedad justify-content: center ponemos el contenido en el centro del elemento.

3. Centrar el contenido de un elemento html verticalmente

Para poner en el medio el texto de un elemento pero solo en vertical en vez de usar la propiedad justify-content usaremos la propiedad align-items: center como en el siguiente ejemplo:

Copiarhtml
<div>
  <h2>contenido del elemento para este ejemplo</h2>
</div>

Copiarcss
div {
  min-height: 400px;
  display: flex;
  align-items: center;
}

Bonus - centrar el texto en ambos ejes

Para tener el texto centrado en ambos sentidos usaremos las dos propiedades de css flexbox usadas anteriormente pero aplicando ambas al mismo elemento simultáneamente.

Copiarhtml
<div>
  <h2>contenido del elemento para este ejemplo</h2>
</div>

Copiarcss
div {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Usando las propiedades de css anteriores, también puedes aprender a como centrar una imagen en css de forma sencilla.