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>