CSSda elementlarni markazlashtirishning turli…

CSSda elementlarni markazlashtirish uchun bir nechta yondashuvlar mavjud bo'lib, ularning tanlovi kontekstga bog'liq: element turiga (inline vs block), kontentni hisobga olish zarurati, hujjat oqimidagi joylashuvi va talab qilinadigan moslashuvchanlik.

Inline elementlar uchun: text-align: center; xususiyati ota-elemga qo'llanadi.
- Qachon foydalaniladi: matn, rasm yoki boshqa inline yoki inline-block elementlarni blok konteyner ichida markazlashtirish zarur bo'lsa.
- Misol:
```
.container {
  text-align: center; /* Inline elementlarni markazlashtiradi */
}
```
Inline-block elementlar uchun: ham text-align: center; ota-elemda qo'llanadi.
- Qachon foydalaniladi: inline elementlar bilan o'xshash, bloklarni satrlar kabi ishlashini ta'minlash uchun (masalan, tugmalar, ikonalar, display: inline-block; bilan ro'yxatlar).
Block elementlar uchun:
- margin: auto; yordamida: elementga o'zi qo'llanadi. Kenglikni belgilash talab qilinadi (width: auto; bilan markazlashtirish mumkin emas).
  - Qachon foydalaniladi: kengligi belgilangan yoki maksimal bo'lgan blok elementlarni gorizontal markazlashtirish uchun eng oddiy va keng tarqalgan usul.
  - Misol:
```
.centered-block {
  width: 50%; /* yoki aniq kenglik, masalan, 300px */
  margin: 0 auto; /* gorizontal markazlashtirish */
}
```
- Flexbox yordamida: gorizontal va vertikal markazlashtirish imkonini beradi.
  - Qachon foydalaniladi: elementlarni joylashtirish va tarqatish uchun moslashuvchan bo'lib, bir yoki bir nechta elementlarni markazlashtirish uchun juda yaxshi.
  - Misol: (ota-elemning markazida joylashishini ta'minlash)
```
.container {
  display: flex;
  justify-content: center; /* gorizontal markazlashtirish */
  align-items: center; /* vertikal markazlashtirish */
  height: 100vh; /* misol uchun, konteyner balandligini belgilash */
}
```
- Grid Layout yordamida: ikki o'lchovli joylashuv uchun kuchli imkoniyatlar taqdim etadi.
  - Qachon foydalaniladi: murakkab ikki o'lchovli layoutlar uchun yoki elementni grid ichidagi ma'lum bir katakda markazlashtirish uchun.
  - Misol: (grid katakda elementni markazlashtirish)
```
.container {
  display: grid;
  place-items: center; /* align-items va justify-items uchun qisqartma */
  height: 100vh;
}
```
Vertikal markazlashtirish (qo'shimcha usullar blok elementlar uchun):
- Absolyut pozitsiyalash va transform yordamida: element absolyut tarzda joylashadi, yuqori va chap chetadan 50% ga siljiydi, so'ng transform yordamida o'z kengligi va balandligining yarmiga sozlanadi. position: relative; ota-elemda talab qilinadi.
  - Qachon foydalaniladi: boshqa elementlar ustiga joylashtirish uchun yoki boshqa usullar muayyan sabablarga ko'ra mos kelmasa (masalan, modal oynalar, paydo bo'ladigan tavsiflar). Element odatiy oqimdan chiqariladi.
  - Misol:
```
.parent {
  position: relative; /* farzand element uchun muhim */
  height: 200px; /* misol uchun */
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* kengligi va balandligining yarmiga siljish */
  width: 100px;
  height: 100px;
}
```
- line-height yordamida: faqatgina bir satrli matnni vertikal markazlashtirish uchun mos. line-height blokning balandligiga teng bo'lishi kerak.
  - Qachon foydalaniladi: oddiy holatlar uchun, bitta satr matnni vertikal ravishda joylashtirish zarur bo'lsa (masalan, tugmalar yoki ikonlar bilan yozilgan).
  - Misol:
```
.single-line {
  height: 50px;
  line-height: 50px; /* height bilan mos kelishi kerak */
}
```
- Fantom element va vertical-align yordamida: pseudo-element :before yoki :after bilan, display: inline-block; va height: 100%; bilan, vertical-align: middle; yordamida markazlashtirish.
  - Qachon foydalaniladi: kamroq amaliy, lekin muayyan sharoitlarda, Flexbox yoki Grid mavjud bo'lmagan yoki qo'llanilmaydigan hollarda (masalan, eski brauzerlarni qo'llab-quvvatlash uchun).

Xulosa jadvali:

Usul	Gorizontal	Vertikal	Element turi	Xususiyatlar
`text-align: center;`	Ha	Yo'q	Inline, inline-block	Ota elementda.
`margin: auto;`	Ha	Yo'q	Blok (kengligi bilan)	Elementda o'zi. Oddiy va ishonchli.
Flexbox	Ha	Ha	Blok, Flex elementlari	Elastik joylashuv, bir o'q uchun yoki ikkala o'qda markazlashtirish uchun juda yaxshi.
Grid Layout	Ha	Ha	Grid elementlari	Kuchli, murakkab ikki o'lchovli layoutlar uchun, katak ichida markazlashtirish.
Absolyut pozitsiyalash + `transform`	Ha	Ha	Har qanday	Oqimdan chiqaradi. Yopishtirish uchun mos.
`line-height`	Yo'q	Ha	Bir satrli matn	Faqat bitta satr uchun, doimiy balandlik talab qilinadi.
Fantom element + `vertical-align`	Yo'q	Ha	Turli	Kamroq keng tarqalgan, moslashuv uchun foydali bo'lishi mumkin.

Usul tanlovi vazifaga bog'liq. Zamonaviy rivojlanishda, Flexbox va Grid eng afzal, chunki ular moslashuvchan va ikkala o'qda joylashishni ta'minlaydi. margin: auto; gorizontal markazlashtirish uchun standart qoladi. text-align: center; inline elementlar uchun ishlatiladi.

CSSda elementlarni markazlashtirishning turli usullari qanday va har birini qachon ishlatish yaxshiroq?