Bir bloğu hem yatay hem de dikey olarak nasıl ortalayabilirsiniz?

Flexbox:

• Ebeveyn ile:

  .parent {
    display: flex; // Flex konteyneri etkinleştir
    justify-content: center; // Yatayda ortala
    align-items: center; // Dikeyde ortala
  }
  

Grid:

• Ebeveyn ile:

  .parent {
    display: grid; // Grid konteynerini etkinleştir
    place-items: center; /* Hem yatay hem de dikey ortalamayı sağlar.
                            Eşdeğerdir:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute ve Transform:

.parent {
  position: relative; // Ebeveyn konumlandırılmalı
}

.child {
  position: absolute; // Mutlak konumlandırma
  top: 50%; // Üst kenarı ebeveynin %50'sine taşı
  left: 50%; // Sol kenarı ebeveynin %50'sine taşı
  transform: translate(-50%, -50%); /* Elemanı kendi genişliği ve yüksekliğinin yarısı kadar kaydırır
                                       böylece tam ortalanır */
}

Margin: auto (yalnızca yatay merkezleme için inline-block ve block):

.element {
  display: block; // veya inline-block
  width: belirli-genişlik; // Genişlik belirlenmeli
  margin: 0 auto; // Otomatik sol ve sağ marginler
}