Cómo centrar un div con css

En el mundo del desarrollo web, a menudo es necesario centrar elementos en una página para darle una apariencia más atractiva y organizada. Una de las formas más comunes de hacerlo es utilizando el elemento div, que se puede centrar fácilmente con CSS.

Ya tenemos un artículo acerca de cómo centrar el texto de un elemento en este artículo nos centraremos como poner los divs o otras etiquetas en el centro de la pantalla independientemente del texto del elemento.

1. Centrar div usando el método "margin: 0 auto"

Una forma común de centrar un div es utilizando "margin: 0 auto". Este método funciona colocando margen automático tanto a la izquierda como a la derecha del elemento, lo que lo hace centrado en la página.

Copiarcss
div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 0 auto;
}

2. Centrar div con "display: flex" y "justify-content: center"

Otra forma de centrar un div es utilizando el método "display: flex" y "justify-content: center". Este método funciona convirtiendo el elemento div en un elemento flex y alineando el contenido al centro.

Copiarhtml
<div>
  <p>Texto de prueba</p>
</div>

Para este ejemplo necesitamos posicionar un párrafo en el centro de la pantalla, para eso envolvemos la etiqueta p dentro de un div y añadimos el siguiente css.

Copiarcss
div {
  width: 100%;
  display: flex;
  justify-content: center;
}

3. Centrar div con "display: grid" y "place-content: center"

Esta forma de centrar un div toma las mismas bases del método anterior pero gracias utilizamos css grid en lugar de flexbox.

Copiarhtml
<div>
  <p>Texto de prueba</p>
</div>

Copiarcss
div {
  width: 100%;
  display: grid;
  place-content: center;
}

4. Centrar div con "position: absolute" y "left: 50%"

También es posible centrar un div utilizando el método "position: absolute" y "left: 50%". de esta forma podemos posicionar el elemento div de forma absoluta y moviéndolo al 50% del ancho de la página.

Copiarhtml
<div></div>

Copiarcss
div {
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}