Veb səhifədə elementləri üfüqi olaraq mərkəzləşdirməyin yolları hansılardır?

Müxtəlif ümumi üsullar mövcuddur:

• text-align: Ana konteyner daxilində satır içi (inline və ya inline-block) elementlər üçün. Ana konteynerin text-align: center olmalıdır.

• margin: auto: Blok (block) elementlər üçün. Elementin müəyyən genişliyi (width) olmalıdır. Brauzer avtomatik olaraq solda və sağda mövcud boşluğu bölüşdürür.

  .element {
    width: 200px;
    margin: 0 auto;
  }
  

• Flexbox: Elastik yerləşdirmə sistemi. Ana konteynerə tətbiq olunur.

  .container {
    display: flex;
    justify-content: center; /* Elementləri əsas ox üzrə (üfüqi) mərkəzləşdirir */
  }
  

• Grid: İki ölçülü yerləşdirmə sistemi. Ana konteynerə tətbiq olunur.

  .container {
    display: grid;
    justify-items: center; /* Hüceyrə məzmununu üfüqi mərkəzləşdirir */
  }
  

• Position: absolute və transform: Məlum genişliyə malik mütləq mövqeləndirilmiş elementlər üçün.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Elementi genişliyinin yarısı qədər sola köçürür */
  }
  

• Display: table və margin: auto: Nadir istifadə olunur, amma mümkündür.

  .element {
    display: table;
    margin: 0 auto;
  }