Imagen destacada del artículo Cómo centrar el texto con css y sin usar html

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

css svg
actualizado: 16 / 07 / 2022

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.

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;
}
Nota importante:

En este ejemplo asignamos una altura de 400 pixeles al div para notar claramente como el contenido se centra verticalmente con respecto a su contenedor

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 aprender a como centrar una imagen en css de forma sencilla.

Artículos relacionados:
Cómo insertar estilos css en html

Imagen destacada del artículo Cómo insertar estilos css en html

Cómo poner color de fondo en html con css

Imagen destacada del artículo Cómo poner color de fondo en html con css

Cómo cambiar color de texto html con css

Imagen destacada del artículo Cómo cambiar color de texto html con css

Cómo crear un formulario de contacto con html

Imagen destacada del artículo Cómo crear un formulario de contacto con html

Cómo centrar un div con css

Imagen destacada del artículo Cómo centrar un div con css

Cómo centrar una tabla html con css

Imagen destacada del artículo Cómo centrar una tabla html con css

Cómo deshabilitar la selección de texto con css

Imagen destacada del artículo Cómo deshabilitar la selección de texto con css

Colores en html, códigos y nombres

Imagen destacada del artículo Colores en html, códigos y nombres