¿Cómo se puede centrar un bloque tanto horizontal como verticalmente?

Flexbox:

• Con el padre:

  .parent {
    display: flex; // Activamos el contenedor flex
    justify-content: center; // Centramos horizontalmente
    align-items: center; // Centramos verticalmente
  }
  

Grid:

• Con el padre:

  .parent {
    display: grid; // Activamos el contenedor grid
    place-items: center; /* Centra tanto horizontal como verticalmente.
                            Equivale a:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute y Transform:

.parent {
  position: relative; // El padre debe estar posicionado
}

.child {
  position: absolute; // Posicionamiento absoluto
  top: 50%; // Mueve el borde superior al 50% del padre
  left: 50%; // Mueve el borde izquierdo al 50% del padre
  transform: translate(-50%, -50%); /* Desplaza el elemento a la mitad
                                       de su propia anchura y altura
                                       para un centrado exacto */
}

Margin: auto (solo para centrado horizontal en inline-block y block):

.element {
  display: block; // O inline-block
  width: cierto-ancho; // La anchura debe estar definida
  margin: 0 auto; // Márgenes automáticos a la izquierda y derecha
}