<div class="stage">
  <div class="card"></div>
</div>

Estilos comuns

.stage {
  width: 500px;
  height: 500px;
  position: relative;
  border: 2px solid #3498db;
  margin: 0 auto;
}

.card {
  width: 120px;
  height: 120px;
  border: 2px solid #e67e22;
}

1. Posicionamanto absoluto com margens automáticas

Fixe todos os lados do elemento filho em zero e deixe o navegador distribuir o espaço restante pelas margens.

.card {
  position: absolute;
  inset: 0;
  margin: auto;
}

2. Deslcoamento negativo com margin

Coloque o canto superior esquerdo da caixa no centro e retroceda metade de suas dimensões.

.card {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -60px;
  margin-top: -60px;
}

3. Transform com porcentagens

Combine left: 50% e top: 50% com translate para deslocar o elemento em relação ao próprio tamanho.

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

4. Transform com valores fixos

Quando as dimensões são conhecidas, é possível usar um deslocamento fixo em vez de porcentagem.

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

5. Centralização com Flexbox

Transforme o container em um contexto flex e use as propriedades de alinhamento nos dois eixos.

.stage {
  width: 500px;
  height: 500px;
  border: 2px solid #3498db;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  width: 120px;
  height: 120px;
  border: 2px solid #e67e22;
}

6. Centralização com CSS Grid

Com o Grid, a centralização pode ser feita em uma única propriedade no container.

.stage {
  width: 500px;
  height: 500px;
  border: 2px solid #3498db;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

.card {
  width: 120px;
  height: 120px;
  border: 2px solid #e67e22;
}

7. Alinhamento com célula de tabela

Outra alternativa é simular uma célula de tabela, combinando text-align e vertical-align.

.stage {
  width: 500px;
  height: 500px;
  border: 2px solid #3498db;
  margin: 0 auto;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.card {
  width: 120px;
  height: 120px;
  border: 2px solid #e67e22;
  display: inline-block;
}

8. Centralização com Grid e alinhamento individual

No Grid, também é possível alinhar apenas o próprio item em vez de centralizar todos os itens do container.

.stage {
  width: 500px;
  height: 500px;
  border: 2px solid #3498db;
  margin: 0 auto;
  display: grid;
}

.card {
  width: 120px;
  height: 120px;
  border: 2px solid #e67e22;
  align-self: center;
  justify-self: center;
}