Tutorial em #CSS com as principais maneiras de #centralizar uma #div horizontalmente e verticalmente na tela

 

<div class="container">
 <div class="centered-div">
 <!-- Conteúdo da div centralizada -->
 </div>
</div>

Método 1: Flexbox

.container {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh; /* Define a altura total da tela */
}

.centered-div {
 /* Estilos da div centralizada */
}

 

Método 2: Grid

.container {
 display: grid;
 place-items: center;
 height: 100vh; /* Define a altura total da tela */
}

.centered-div {
 /* Estilos da div centralizada */
}

 

Método 3: Posicionamento absoluto

.container {
 position: relative;
 height: 100vh; /* Define a altura total da tela */
}

.centered-div {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 /* Estilos da div centralizada */
}

 

Método 4: Margens automáticas

.container {
 height: 100vh; /* Define a altura total da tela */
}

.centered-div {
 margin: auto;
 /* Estilos da div centralizada */
}

 

 

Esses são alguns dos métodos mais comuns para centralizar uma div tanto horizontalmente quanto verticalmente na tela. Você pode escolher o método que melhor se adequa ao seu projeto.