🎯 Exemplos Visuais: Como Centralizar uma <div> com CSS

1. Centralizar Horizontalmente com margin: 0 auto;

.caixa {
  width: 300px;
  margin: 0 auto;
}

2. Centralizar com Flexbox (horizontal e vertical)

.example2 {
  display: flex;
  justify-content: center; /* centraliza horizontal */
  align-items: center;     /* centraliza vertical */
  height: 150px;
}

.caixa {
  background-color: #e74c3c;
  padding: 1rem 2rem;
  border-radius: 8px;
  color: white;
  font-weight: bold;
}

3. Centralizar com Grid

.example3 {
  display: grid;
  place-items: center;
  height: 150px;
}

.caixa {
  background-color: #2ecc71;
  padding: 1rem 2rem;
  border-radius: 8px;
  color: white;
  font-weight: bold;
}

4. Centralizar com Position Absoluta

.example4 {
  position: relative;
  height: 150px;
}

.centro {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #9b59b6;
  padding: 1rem 2rem;
  border-radius: 8px;
  color: white;
  font-weight: bold;
}

💡 Dica

Use Flexbox ou Grid sempre que possível. São os métodos mais modernos, responsivos e fáceis de manter.
Evite usar position: absolute como padrão, pois pode causar problemas em layouts responsivos.