# ¿Cómo centrar un div?
Español | English
Cómo centrar un div en HTML y CSS es una tarea común en el diseño web. Un div puede envolver cualquier contenido que desees centrar, como texto, imágenes o vídeos, así que cuando creamos una página web, a menudo queremos que un div se coloque en el centro de la página o de otro elemento contenedor para el div. El contenedor es el elemento padre del div y se utiliza para alinear el div en el centro del mismo. El contenedor puede ser cualquier elemento HTML, pero el elemento body suele ser el más comúnmente utilizado. En este artículo, exploraremos algunas formas de centrar un div usando HTML y CSS.
# 1. Utilizando CSS Flexible Box Layout (flexbox) alineando ejes
La propiedad CSS display: flex se utiliza para crear un contenedor flexible que se ajusta automáticamente al tamaño del contenido. Para centrar un div utilizando flexbox, simplemente debemos agregar al contenedor la propiedad display: flex junto con las propiedades de alineación de ejes justify-content: center; y align-items: center;, lo que nos permite no tener que establecer la alineación del elemento hijo de forma explícita ya que es el propio contenedor padre quien se encarga de orientar la ubicación del elemento hijo.
<div class="flexbox-align">
<div class="flexbox-align__content">
flexbox align
</div>
</div>
.flexbox-align {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
width: 200px;
background: #ffff99;
color: #333;
}
.flexbox-align__content {
}
Esta técnica nos permite explorar todas las posibilidades de alineación que nos ofrece flexbox en cuanto a la alineación de los ejes primario y secundario.
# 2. Utilizando CSS Flexible Box Layout (flexbox) con el margen automático del contenido
La combinación de las propiedad CSS display: flex y margin: auto permiten al navegador adaptar el elemento hijo al tamaño del contenedor. Para centrar un div utilizando flexbox y margen automático, simplemente debemos agregar al contenedor la propiedad display: flex y por otro lado la propiedad margin: auto al contenido. Esto centrará automáticamente el div en el centro del contenedor.
<div class="flexbox-margin-auto">
<div class="flexbox-margin-auto__content">
flexbox margin auto
</div>
</div>
.flexbox-margin-auto {
display: flex;
height: 100px;
width: 200px;
background: #ffff99;
color: #333;
}
.flexbox-margin-auto__content {
margin: auto;
}
# 3. Utilizando CSS Grid Layout (grid)
La propiedad CSS display: grid se utiliza para crear una cuadrícula bidimensional para organizar el contenido de forma flexible. Para centrar un div utilizando grid, simplemente debemos agregar al contenedor la propiedad display: grid junto con la propiedad de alineación de ejes place-items: center;, y por otro lado la propiedad margin: auto al div. Esto centrará automáticamente el div en el centro del contenedor.
<div class="grid">
<div class="grid__content">
grid
</div>
</div>
.grid {
display: grid;
place-items: center;
height: 100px;
width: 200px;
background: #ffff99;
color: #333;
}
.grid__content {
margin: auto;
}
# 4. Utilizando transformaciones para modificar el espacio de coordenadas
La propiedad CSS transform: translate() se utiliza para rotar, escalar, sesgar o mover un elemento en una dirección específica, por lo que aprovecharemos dicha característica para centrar el div.
Para centrar un div utilizando transformación, agregaremos la propiedad position: absolute a los elementos contenedor e hijo y las propiedades left: 50% y top: 50% al elemento hijo para posicionar el div en el centro del contenedor. Luego, utilizamos la propiedad transform: translate() para mover las coordenadas superior izquierda del div hacia izquierda y hacia arriba:
<div class="transform">
<div class="transform__content">
transform
</div>
</div>
.transform {
position: relative;
height: 100px;
width: 200px;
background: #ffff99;
color: #333;
}
.transform__content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Esta técnica debe aplicarse con cuidado ya que al usar posiciones absolutas, estamos eliminando el elemento del flujo de la página lo que puede provocar la sobreposición de elementos de manera no deseada.
# 5. Centrado horizontal
Si deseamos exclusivamente centrar un div horizontalmente, además de usar alguna variante de las técnicas anteriores, también podemos usar la propiedad CSS margin con los valores auto y 0. Para utilizar este método, debemos definir un ancho fijo para el div. Si el ancho del div es menor que el ancho del contenedor, el div se centrará automáticamente. En este ejemplo he establecido la propiedad width del element hijo en 50% para que el div ocupe la mitad del ancho del contenedor. La propiedad margin establece los márgenes superior e inferior en 0 y el margen izquierdo y derecho en auto. Esto significa que el navegador calculará automáticamente los márgenes laterales para centrar el div horizontalmente.
<div class="horizontal">
<div class="horizontal__content">
horizontal horizontal horizontal horizontal
</div>
</div>
.horizontal {
height: 100px;
width: 200px;
background: #ffff99;
color: #333;
}
.horizontal__content {
width: 50%;
margin: 0 auto;
}
# 6. Centrado vertical en modo tabla
El centrado vertical es un poco más complicado que el centrado horizontal, pero hay algunas formas de hacerlo. Una forma común es usar la propiedad display con un valor de table-cell y luego establecer la propiedad vertical-align en middle. En este ejemplo, vamos a establecer la propiedad display en table para el elemento contenedor. Esto le dice al navegador que el debe actúa como una tabla, lo que nos permite utilizar la propiedad table-cell en el div hijo. La propiedad vertical-align se establece en middle para centrar el div verticalmente.
<div class="vertical-table">
<div class="vertical-table__content">
vertical table
</div>
</div>
.vertical-table {
display: table;
height: 100px;
width: 200px;
}
.vertical-table__content {
display: table-cell;
vertical-align: middle;
background: #ffff99;
color: #333;
}
Y si le añadimos la alineación centrada del texto (propiedad text-align), tendríamos el contenido completamente centrado en el contenedor:
.vertical-table-center {
display: table;
height: 100px;
width: 200px;
}
.vertical-table-center__content {
display: table-cell;
vertical-align: middle;
text-align: center;
background: #ffff99;
color: #333;
}
# 7. Centrado vertical absoluto
Otra forma de centrar un div verticalmente es usando la propiedad position con un valor de absolute, estableciendo los márgenes en auto y las roiedades top, right, bottom y left a 0. En este ejemplo, vamos a establecer la propiedad position en relative para el elemento contenedor, para el que también debemos establecer la propiedad height (si habláramos del elemento body usaríamos el valor 100vh para que ocupara toda la altura de la ventana del navegador). Por defecto, esto hará que el div contenido se extienda hasta los límites del contenedor, por lo que nuestro div contenido debería tener un tamaño definido menor (o relativo) a su contenedor para centrarse completamente. Para que el texto de este ejemplo también aparezca centrado dentro del div contenido, añadiremos la alineación centrada del texto (propiedad text-align).
<div class="vertical-absolute">
<div class="vertical-absolute__content">
vertical absolute
</div>
</div>
.vertical-absolute {
position: relative;
height: 100px;
width: 200px;
background: #ffff99;
color: #333;
}
.vertical-absolute__content {
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
height: 50px;
width: 100px;
}