3 maneiras de centralizar uma DIV

Antes de ir direto ao que interessa, vamos entender o que são as DIVs.

A <div> é um elemento de divisão do HTML (Linguagem de Marcação de Hipertexto) que é um container genérico para conteúdo de fluxo, que de certa forma não representa nada. Ele pode ser utilizado para agrupar elementos para fins de estilos (usando class ou id), ou porque eles compartilham valores de atributos, como lang. Ele deve ser utilizado somente quando não tiver outro elemento de semântica (tal como <article> ou <nav>).

Agora vamos para as três maneiras de centralizar um <div>.

Primeira maneira:

.classic {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

Segunda maneira:

.div-flex {

display: flex;

align-items: center;

justify-content: center;

}

Terceira maneira:

.div-grid {

display: grid;

place-items: center;

}