Como puedo centrar un < div > ...?

Vamos a centrar un div

En esta entrada te muestro tres métodos diferentes para centrar el contenido de un div like a pro

Los métodos para centrar < div > son:

1. position: absolute;
2. display: flex;
3. display: grid;

---

Position: absolute..?

La propiedad 'position' de CSS especifica la manera en que un elemento es posicionado en el DOM. Las propiedades que tenemos disponibles son:

top, right, bottom, left

Estas propiedades establecen la position final de los elementos. Existen varios tipos de position, los mas comunes son.

static, relative, absolute, sticky

Centrar < div > con position: absolute;

    div{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50, -50);
        }

---

Display: flex...?

Desde el inicio, display flex es parte de FlexBox, es un set de propiedad 'nuevas' de HTML5, nos permite maquetar nuestros proyectos web de una manera mas sencilla e intuitiva (es mi propiedad favorita). FlexBox funciona como un elemento contenedor (flex container) que ordena y posiciona todos los elementos contenidos segun se le indique.

Centrar un < div > con display: flex;

    div{
        display: flex;
        align-items: center;
        justify-content: center;
        }

---

Display: grid...?

A mi manera de entender como funcionan las cosas puedo decir que grid y flex son iguales y tienen el mismo objetivo, pero funcionan de manera diferente. Las propiedades Grid también se crearon para HTML5 y funciona como una cuadricula.

Centrar un con display: grid;

    div{
        display: grid;
        display: grid;  
        justify-content: center;  
        align-content: center;
        }

o

div{
    display: grid;
    place-items: center;
    {