Πώς μπορεί κανείς να κεντράρει ένα μπλοκ τόσο οριζόντια όσο και κάθετα;

Flexbox:

• Με τον γονέα:

  .parent {
    display: flex; // Ενεργοποιούμε το flex container
    justify-content: center; // Κεντράρουμε οριζόντια
    align-items: center; // Κεντράρουμε κάθετα
  }
  

Grid:

• Με τον γονέα:

  .parent {
    display: grid; // Ενεργοποιούμε το grid container
    place-items: center; /* Κεντράρει τόσο οριζόντια όσο και κάθετα.
                            Ισοδύναμο με:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute και Transform:

.parent {
  position: relative; // Ο γονέας πρέπει να είναι τοποθετημένος
}

.child {
  position: absolute; // Απόλυτη θέση
  top: 50%; // Μετακινεί το πάνω άκρο στο 50% του γονέα
  left: 50%; // Μετακινεί το αριστερό άκρο στο 50% του γονέα
  transform: translate(-50%, -50%); /* Μετακινεί το στοιχείο κατά το μισό
                                       του πλάτους και ύψους του
                                       για ακριβή κεντράρισμα */
}

Margin: auto (μόνο για οριζόντια κεντράρισμα σε inline-block και block):

.element {
  display: block; // Ή inline-block
  width: ορισμένο-πλάτος; // Το πλάτος πρέπει να οριστεί
  margin: 0 auto; // Αυτόματα περιθώρια αριστερά και δεξιά
}