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

Actualizado : 2023-09-28

Gracias a css disponemos de una gran variedad de formas para centrar el texto de una etiqueta html ya sea alineándolo con la propiedad text-align, o centrándolo 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 titulo una etiqueta <h1> que por defecto viene con el texto alineado hacia la izquierda para centrarlo solo agregamos la siguiente propiedad a nuestro código css.

css

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.

html

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

css

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:

html

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

css

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.

html

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

css

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

Usando las propiedades de css anteriores, también puedes centrar una imagen en css de forma sencilla. Espero que este artículo te haya servido muchas gracias por leer todo el post.

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi