CSS-də elementləri mərkəzləşdirmənin müxtəlif yolları…

CSS-də elementlərin mərkəzləşdirilməsi üçün bir neçə yanaşma mövcuddur, hansının seçilməsi kontekstdən asılıdır: elementin tipi (xəttli və ya blok), məzmunun nəzərə alınması, sənəd axınında yerləşməsi və tənzimlənmə tələbləri.

Xəttli elementlər üçün: Ümumiyyətlə text-align: center; xüsusiyyəti valideyn blokda istifadə olunur.
- Nə zaman istifadə etmək: Mətn, şəkil və ya digər xəttli və ya xəttli-blok elementləri blok konteyner daxilində mərkəzləşdirmək istədikdə.
- Misal:
```
.container {
  text-align: center; /* Xəttli elementləri mərkəzləşdirir */
}
```
Xəttli-blok elementlər üçün: Həmçinin text-align: center; valideyn blokda uyğundur.
- Nə zaman istifadə etmək: Xətt kimi davranan blokları (məsələn, düymələr, ikonlar, display: inline-block; olan siyahılar) mərkəzləşdirmək üçün.
Blok elementlər üçün:
- margin: auto; ilə: Bu, ən çox istifadə olunan və sadə üsuldur. Elementin eni müəyyən edilməlidir (məsələn, width: 300px;).
  - Nə zaman istifadə etmək: Sabit və ya maksimum eni olan blok elementləri horizontal olaraq mərkəzləşdirmək üçün.
  - Misal:
```
.centered-block {
  width: 50%; /* və ya sabit eni, məsələn, 300px */
  margin: 0 auto; /* Üfüqi mərkəzləşdirmə */
}
```
- Flexbox ilə: Üfüqi və şaquli mərkəzləşdirmə imkanı verir.
  - Nə zaman istifadə etmək: Layoutlarda elementləri elastik şəkildə yerləşdirmək və bölüşdürmək üçün. Bir və ya bir neçə elementi mərkəzləşdirmək üçün idealdır.
  - Misal: (Valideynin ortasında uşaq elementin mərkəzləşdirilməsi)
```
.container {
  display: flex;
  justify-content: center; /* Üfüqi mərkəzləşdirmə */
  align-items: center; /* Şaquli mərkəzləşdirmə */
  height: 100vh; /* Nümunə, konteynerin hündürlüyü */
}
```
- Grid Layout ilə: İki ölçülü yerləşdirmələr üçün güclü imkanlar təqdim edir.
  - Nə zaman istifadə etmək: Daha mürəkkəb iki ölçülü layoutlar və ya elementləri şəbəkədə müəyyən hüceyrədə mərkəzləşdirmək üçün.
  - Misal: (Şəbəkədə hüceyrədə elementin mərkəzləşdirilməsi)
```
.container {
  display: grid;
  place-items: center; /* align-items və justify-items üçün qısaldılmışdır */
  height: 100vh;
}
```
Şaquli mərkəzləşdirmə (əlavə metodlar blok elementlər üçün):
- absolute mövqeləndirmə və transform ilə: Element mütləq mövqeləndirilir, yuxarıdan və soldan 50% köçürülür, sonra isə öz eni və hündürlüyünün yarısı qədər transform ilə tənzimlənir. Valideyn position: relative; olmalıdır.
  - Nə zaman istifadə etmək: Digər elementlərin üzərinə yerləşdirmək və ya sənəd axını xüsusiyyətləri uyğun gəlmədikdə (məsələn, modal pəncərələr, pop-up bildirişlər). Element sənəddən çıxarılır.
  - Misal:
```
.parent {
  position: relative; /* Uşağın mövqeyini təyin etmək üçün vacibdir */
  height: 200px; /* Nümunə */
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* En və hündürlüyün 50%-i qədər köçürülür */
  width: 100px;
  height: 100px;
}
```
- line-height ilə: Yalnız tək sətirli mətnin şaquli mərkəzləşdirilməsi üçün uyğundur. line-height blokun hündürlüyü ilə eyni olmalıdır.
  - Nə zaman istifadə etmək: Sadə hallarda, məsələn, düymələr və ya ikonlar ilə mətnin tək sətirini şaquli olaraq yerləşdirmək üçün.
  - Misal:
```
.single-line {
  height: 50px;
  line-height: 50px; /* height ilə eyni olmalıdır */
}
```
- Fantom element və vertical-align ilə: :before və ya :after pseudo-elementləri ilə display: inline-block; və height: 100%; istifadə edilir, vertical-align: middle; ilə mərkəzləşdirilir.
  - Nə zaman istifadə etmək: Daha az yayılmışdır, lakin bəzi xüsusi hallarda, Flexbox və ya Grid mövcud olmadıqda və ya tətbiq edilmədikdə faydalı ola bilər.

Xülasə cədvəli:

Metod	Üfüqi	Şaquli	Element tipi	Xüsusiyyətlər
`text-align: center;`	Bəli	Yox	Xəttli, Inline-block	Valideyn elementdə.
`margin: auto;`	Bəli	Yox	Blok (eni müəyyən)	Elementin özündə. Sadə və etibarlı.
Flexbox	Bəli	Bəli	Blok, Flex-elementlər	Elastik yerləşdirmə, bir və ya bir neçə elementin mərkəzləşdirilməsi üçün uyğundur.
Grid Layout	Bəli	Bəli	Grid elementləri	Güclü, mürəkkəb iki ölçülü layoutlar və hüceyrədə mərkəzləşdirmə üçün.
`absolute` + `transform`	Bəli	Bəli	Hər hansı	Sənəddən çıxarır. Yerləşdirmə üçün uyğundur.
`line-height`	Yox	Bəli	Yalnız tək sətirli mətn	Yalnız bir sətir üçün, sabit hündürlük tələb edir.
Fantom element + `vertical-align`	Yox	Bəli	Müxtəlif	Daha az yayılmış, bəzi köhnə brauzerlər üçün faydalı ola bilər.

Metod seçimi konkret tapşırığa bağlıdır. Müasir inkişafda, Flexbox və Grid ən çox üstünlük verilənlərdir, çünki elastik və hər iki istiqamətdə yerləşdirmə imkanları təqdim edir. margin: auto; isə hələ də geniş istifadə olunur və blok elementlərin üfüqi mərkəzləşdirilməsi üçün standartdır. text-align: center; isə xəttli elementlər üçün istifadə olunur.

CSS-də elementləri mərkəzləşdirmənin müxtəlif yolları hansılardır və hər birini nə vaxt istifadə etmək daha yaxşıdır?