Cum poți centra un bloc atât pe orizontală, cât și pe verticală?

Flexbox:

• Cu părintele:

  .parent {
    display: flex; // Activăm containerul flex
    justify-content: center; // Centrare pe orizontală
    align-items: center; // Centrare pe verticală
  }
  

Grid:

• Cu părintele:

  .parent {
    display: grid; // Activăm containerul grid
    place-items: center; /* Centrează atât pe orizontală, cât și pe verticală.
                            Echivalent cu:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute și Transform:

.parent {
  position: relative; // Părintele trebuie să fie poziționat
}

.child {
  position: absolute; // Poziționare absolută
  top: 50%; // Mută marginea superioară la 50% din părinți
  left: 50%; // Mută marginea stângă la 50% din părinți
  transform: translate(-50%, -50%); /* Mută elementul cu jumătate
                                       din propria sa lățime și înălțime
                                       pentru centrare exactă */
}

Margin: auto (doar pentru centrare orizontală în inline-block și block):

.element {
  display: block; // Sau inline-block
  width: anumită-lățime; // Lățimea trebuie să fie setată
  margin: 0 auto; // Margini automate stânga și dreapta
}