Cómo centrar un Div usando CSS Grid

En este artículo, veremos cuatro formas de centrar horizontal y verticalmente un div usando CSS Grid. Por supuesto, estas técnicas de centrado se pueden utilizar en cualquier tipo de elemento.

Configuración inicial

Primero, creemos un contenedor con un elemento de caja simple dentro que usaremos para demostrar estos métodos de centrado. Aquí está el HTML:

<article>
  <div></div>
</article>

Y aquí está el CSS inicial:

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

En todos los ejemplos, usaremos la propiedad display: grid. Esto establece el elemento article como un contenedor de cuadrícula y genera una cuadrícula a nivel de bloque para ese contenedor.

Ahora, veamos las diversas formas de centrar nuestro div.

1. Centrar un Div con CSS Grid y place-self

Centrar el div es tan simple como esto:

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
  place-self: center; /* nuevo */
}

La propiedad place-self es una forma abreviada de las propiedades align-self (vertical) y allow-self (horizontal) (que son útiles si solo se centra en un eje).

Usar place-self es tan simple que es una solución obvia. Pero no es la única forma de centrar un elemento con Grid, así que ahora veamos otros métodos.

Una ventaja de usar place-self es que se aplica al elemento que se está centrando, lo que significa que también puede usarlo para centrar otros elementos en el mismo contenedor.

2. Centrar un div con CSS Grid, justify-content y align-items

La propiedad justify-content se usa para alinear los elementos del contenedor horizontalmente cuando los elementos no usan todo el espacio disponible. Hay muchas formas de configurar la propiedad justify-content

Al igual que la propiedad justify-content, la propiedad align-items se usa para alinear el contenido en un contenedor, pero alinea el contenido verticalmente en lugar de horizontalmente.

En el código prueba agreguemos el siguiente código al contenedor principal:

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
  justify-content: center; /* nuevo */
  align-items: center; /* nuevo */
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

3. Centrar un Div con CSS Grid y Auto Margins

Como siempre, apuntaremos al contenedor principal con display: grid. También asignaremos al div un margen automático usando margin: auto. Esto hace que el navegador calcule automáticamente el espacio disponible que rodea al div secundario y lo divida vertical y horizontalmente, colocando el div en el medio:

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
  margin: auto; /* nuevo */
}

4. Centrar un div con CSS Grid y place-items

The place-items property se utiliza para alinear elementos vertical y horizontalmente en una cuadrícula. Se puede usar para centrar nuestro div apuntando al contenedor de esta manera:

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
  place-items: center; /* nuevo */
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

Al igual que la propiedad place-self, place-items es una forma abreviada de dos propiedades, en este caso justify-items (horizontal) y align-items (vertical).

En contraste con place-self, place-items se aplica al contenedor, lo que le da un poco menos de flexibilidad.

Fin del artículo.