1. Flexbox Kullanımı: Elemanı hem yatay hem de dikey olarak merkezlemek için

   display: flex;

   ,

   justify-content: center;

   ve

   align-items: center;

   özelliklerini kullanmak yeterlidir 12.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
Kopyala

2. Grid Kullanımı:

   display: grid;

   ve

   place-items: center;

   özellikleri ile de elemanı merkezlemek mümkündür 13.

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}
Kopyala

3. Absolute Konumlandırma:

   position: absolute;

   ,

   top: 50%; left: 50%; transform: translate(-50%, -50%)

   özellikleri ile elemanı merkezleyebilirsiniz 14.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Kopyala

4. Margin Kullanımı:

   margin: 0 auto;

   özelliği, blok düzeyinde bir elemanı yatay olarak merkezlemek için kullanılabilir 23.