Blokni gorizontal va vertikal ravishda qanday markazlashtirish mumkin?

Flexbox:

• Ota ota:

  .parent {
    display: flex; // Flex konteynerini faollashtirish
    justify-content: center; // Gorizontal markazlashtirish
    align-items: center; // Vertikal markazlashtirish
  }
  

Grid:

• Ota ota:

  .parent {
    display: grid; // Grid konteynerini faollashtirish
    place-items: center; /* Gorizontal va vertikal markazlashtiradi.
                            Tengdir:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute va Transform:

.parent {
  position: relative; // Ota pozitsiyalash kerak
}

.child {
  position: absolute; // Absolut pozitsiyalash
  top: 50%; // Yuqori chetni 50% ga siljitadi
  left: 50%; // Chap chetni 50% ga siljitadi
  transform: translate(-50%, -50%); /* Elementni o'z kengligi va balandligining yarmiga siljitadi
                                       to'g'ri markazlash uchun */
}

Margin: auto (faqat gorizontal markazlash uchun inline-block va block):

.element {
  display: block; // Yoki inline-block
  width: belgilangan-kenglik; // Kenglik belgilanishi kerak
  margin: 0 auto; // Avtomatik chetlar
}