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 crear un menú desplegable con html y css

Imagen destacada del artículo Cómo crear un menú desplegable con html y css

Cómo poner una imagen de fondo en html con css

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

Cómo justificar el texto html con css

Imagen destacada del artículo Cómo justificar el texto html con css

Cómo cambiar color del texto en html con css

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

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 insertar estilos css en html

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

CSS text-align propiedad para alinear el texto de una etiqueta html

Imagen destacada del artículo CSS text-align propiedad para alinear el texto de una etiqueta html

Editar y personalizar el cursor con css

Imagen destacada del artículo Editar y personalizar el cursor con css