Veb səhifədə elementlərin mərkəzləşdirilməsi üçün…

Elementlərin mərkəzləşdirilməsi üçün çoxsaylı üsullar mövcuddur. Əsas fərqlər nədən mərkəzləşdiririk (xətt elementləri, blok elementləri, mətn), nəyə görə mərkəzləşdiririk (valideyn, viewport) və hansı texnologiyaları istifadə edirik (CSS, JavaScript).

Xətt məzmununun üfüqi mərkəzləşdirilməsi:

text-align: center; valideyn elementə tətbiq olunur.

.parent {
  text-align: center; /* Xətt və inline-block uşaqları mərkəzləşdirir */
}

Blok elementin üfüqi mərkəzləşdirilməsi:

margin: auto; və təyin olunmuş genişlik ilə.

.element {
  width: 50%; /* Genişliyi təyin edir */
  margin: 0 auto; /* Üfüqi marjlar avtomatik olaraq mərkəzləşdirir */
}

İki ölçülü (üfüqi və şaquli) mərkəzləşdirmə:

Flexbox: Çevik və güclü üsul.

.parent {
  display: flex;
  justify-content: center; /* Üfüqi mərkəzləşdirmə */
  align-items: center; /* Şaquli mərkəzləşdirmə */
  height: 100vh; /* Viewport-un hündürlüyü ilə nümunə */
}

Grid: Daha mürəkkəb layout üçün uyğundur.

.parent {
  display: grid;
  place-items: center; /* align-items və justify-items-in qısaldılması */
  height: 100vh;
}

Positioning və Transform: Elementi valideyninə görə mərkəzləşdirmək üçün uyğundur, hətta valideynin ölçüsü məhduddursa.

.parent {
  position: relative; /* Valideynin mövqeyi təyin olunmalı */
}

.element {
  position: absolute; /* Element mütləq mövqeyə sahib olur */
  top: 50%; /* Yuxarı kənarı valideynin hündürlüyünün 50%-inə köçürür */
  left: 50%; /* Sol kənarı valideynin eni 50%-inə köçürür */
  transform: translate(-50%, -50%); /* Elementi öz ölçüsünün yarısı qədər geri çəkir */
}

Margin auto və mütləq mövqe: Elementin ölçülərini təyin etməyi tələb edir.

.parent {
  position: relative;
}

.element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto; /* Marjlar avtomatik mərkəzləşdirir */
  width: 200px; /* Ölçülər tələb olunur */
  height: 100px;
}

İki ölçülü blok elementlərin mərkəzləşdirilməsi üçün bəzi metodların müqayisə cədvəli:

Metod	Təsviri	Üstünlüklər	Dezavantajlar
Flexbox	display: flex, justify-content, align-items istifadə edilərək	Çevik, adaptiv, tək istiqamətli elementlər üçün uyğundur	Çox sadə hallarda artıq ola bilər
Grid	display: grid, place-items istifadə edilərək	Güclü, mürəkkəb çoxölçülü layoutlar üçün uyğundur	Sintaksisi Flexbox-dən daha çoxdur, sadə mərkəzləşdirmə üçün
Positioning + Transform	Mütləq mövqeləndirmə və transform birləşməsi ilə	Elementin ölçüsü məlum olmayan hallarda işləyir	Müəyyənləşdirilmiş valideyn tələb edir
Margin Auto + Absolute Pos.	position: absolute və margin: auto istifadə edilərək	Sadə, ölçüsü sabit olan elementlər üçün uyğundur	Ölçü təyin etməyi tələb edir, daha az çevik

Metod seçimi kontekstdən, elementin növündən, valideyn konteynerindən və tələblərdən asılıdır. Flexbox və Grid ən müasir və çox istifadə olunan üsullardır ikiölçülü mərkəzləşdirmə üçün.

Veb səhifədə elementlərin mərkəzləşdirilməsi üçün müxtəlif üsullar arasındakı fərqlər nədir?