Какие существуют способы горизонтального центрирования элементов на веб-странице?

Существует несколько распространенных способов:

• text-align: Для строчных (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;
  }