Formas de centrar contenido

🎬 Video

Saber centrar contenido en CSS es de los conocimientos más útiles a la hora de crear nuestros proyectos.

Existen distintos métodos, tanto para centrar horizontalmente como para hacerlo verticalmente.

Centrar texto

Podemos centrar el texto de cualquier etiqueta que use nivel de bloque con la regla text-align: center;.

Centrar contenido

Alineación horizontal

Podemos centrar el contenido de cualquier etiqueta que use nivel de bloque con la regla margin: 0 auto;.

El valor importante es auto como segundo parámetro ya que afecta los costados (izquierda y derecha) con dicho valor.

Además de que el ancho (width) del contenido debe de ser menor al 100% del contenedor.

Alineación vertical

Hoy en día tiene gran soporte¹ la alineación vertical en elementos a nivel de bloque usando align-content: center.

Usando flexbox

La manera más actual (en términos de CSS) y más conveniente suele llegar a ser flexbox.

Alineación horizontal

Debemos cambiar la propiedad display para que use el valor flex.

Debemos agregar la propiedad justify-content con el valor center para alinear al centro en el eje horizontal.

Alineación vertical

Debemos cambiar la propiedad display para que use el valor flex.

Debemos agregar la propiedad align-items con el valor center para alinear al centro en el eje vertical.

En este caso agregamos una altura (height) y un borde (border) para que se vea claramente el centrado vertical.

Podemos usar ambos para alinear horizontal y verticalmente.

Usando grid

Debemos cambiar la propiedad display para que use el valor grid.

Debemos agregar la propiedad place-items con el valor center para alinear al centro tanto en el eje horizontal como en el vertical.

Usando position

Alineación horizontal

Debemos cambiar la propiedad position para que use el valor absolute.

Debemos agregar la propiedad left con el valor 50% para llevar el costado izquierdo de nuestro elemento al centro.

Y debemos mover el eje del elemento para centrarlo correctamente. Para hacerlo podemos usar transform con el valor translateX(-50%).

Alineación vertical

Debemos cambiar la propiedad position para que use el valor absolute.

Debemos agregar la propiedad top con el valor 50% para llevar el borde superior de nuestro elemento al centro.

Y debemos mover el eje del elemento para centrarlo correctamente. Para hacerlo podemos usar transform con el valor translateY(-50%).

Podemos usar ambos para alinear horizontal y verticalmente con el valor: transform: translate(-50%, -50%);

Usando tablas

Debemos crear un contenedor para modificar la alineación horizontal.

Debemos cambiar la propiedad display para que use el valor table.

Para centrar el contenido horizontalmente debemos agregar text-align: center;.

A la etiqueta dentro del contenedor debemos agregarle display: table-cell y vertical-align: middle; para alinear verticalmente.

<center>

En versiones anteriores de HTML se podía utilizar la etiqueta <center>:

<center>Contenido</center>

align="center"

En algunos elementos podemos usar align="center" para centrar el contenido:

<p align="center">Contenido</p>

Y hacer esto no funciona:

<div center="true">Contenido</div>

Comentarios

Compartir