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 soporte1 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>En HTML5 su uso está desalentado2. Se recomienda usar CSS en su lugar.
align="center"
En algunos elementos podemos usar align="center" para centrar el contenido:
<p align="center">Contenido</p>En HTML5 su uso está desalentado. Se recomienda usar CSS en su lugar.
Y hacer esto no funciona:
<div center="true">Contenido</div>