Kaip centrą padaryti horizontaliai ir vertikaliai?

Flexbox:

• Su tėvu:

  .parent {
    display: flex; // Aktyvuojame flex konteinerį
    justify-content: center; // Horizontaliai centruojame
    align-items: center; // Vertikaliai centruojame
  }
  

Grid:

• Su tėvu:

  .parent {
    display: grid; // Aktyvuojame grid konteinerį
    place-items: center; /* Centruoja tiek horizontaliai, tiek vertikaliai.
                            Lygu:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute ir Transform:

.parent {
  position: relative; // Tėvas turi būti pozicionuotas
}

.child {
  position: absolute; // Absoliutus pozicionavimas
  top: 50%; // Perkelia viršutinę kraštinę į 50% iš tėvo
  left: 50%; // Perkelia kairiąją kraštinę į 50% iš tėvo
  transform: translate(-50%, -50%); /* Perkelia elementą per pusę
                                       jo pločio ir aukščio
                                       tiksliai centrui */
}

Margin: auto (tik horizontaliai centravimui inline-block ir block):

.element {
  display: block; // Arba inline-block
  width: nustatyta-plotis; // Plotis turi būti nustatytas
  margin: 0 auto; // Automatinės atstumo reikšmės kairėje ir dešinėje
}