5 maneiras de centralizar uma div com CSS

Centralizar div – na vertical, especialmente – é sempre um drama para o frontend, infelizmente não existe uma forma simples como apenas usar um align: center, mas hoje existem algumas formas diferentes que podemos usar para atingir o objetivo (também é possível fazer com Javascript).

Abaixo seguem 5 maneiras diferentes, de como centralizar uma div com CSS.
Qual dessas maneiras você deve usar? Depende.
Vai depender de como você está fazendo seu código e o objetivo que quer chegar. Vale a pena testar todas e ver qual delas é a melhor para o seu projeto.

1. Usando Flexbox

/* flexbox */
.parent {
    display: flex;
    align-items: center;
    justify-content: center;
}

2. Usando Flexbox & Margin

/* flexbox & margin */
.parent {
    display: flex;
}

.child {
    margin: auto;
}

3. Usando Grid

/* grid */
.parent {
    display: grid;
    place-content: center;
}

4. Usando Grid & Margin

/* grid & margin */
.parent {
    display: grid;
}

.child {
    margin: auto;
}

5. Usando Position

/* position */
.parent {
    position: relative
}

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