Какви са начините за хоризонтално центриране на елементи на уеб страница?

Има няколко често срещани начина:

• text-align: За inline (inline или inline-block) елементи вътре в родителския блок. Родителят трябва да има text-align: center.

• margin: auto: За блокови (block) елементи. Елементът трябва да има зададена ширина (width). Браузърът автоматично разпределя наличното пространство отляво и отдясно.

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

• Flexbox: Гъвкава система за оформление. Прилага се към родителския контейнер.

  .container {
    display: flex;
    justify-content: center; /* Подравнява елементите по главната ос (хоризонтално) */
  }
  

• Grid: Двуизмерна система за оформление. Прилага се към родителския контейнер.

  .container {
    display: grid;
    justify-items: center; /* Подравнява съдържанието на клетките по хоризонтал */
  }
  

• Position: absolute и transform: За абсолютно позиционирани елементи с известна ширина.

  .parent {
    position: relative;
  }
  
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Премества елемента с половината от ширината му наляво */
  }
  

• Display: table и margin: auto: Рядко се използва, но е възможно.

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