CSS - Centralizar uma div horizontalmente e verticalmente

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.