Выравнивание по центру в CSS

Горизонтальное выравнивание текста

Самый распространённый и самый лёгкий тип выравнивания— это выравнивание текста с помощью свойства ‘text-align’.

Горизонтальное выравнивание блока или изображения

Иногда выравнивать горизонтально нужно не текст, а изображение или блок. Для этого нужно установить поля блока  ‘margin’ на ‘auto’. Но при этом сам блок должен иметь фиксированную ширину.

Этот способ можно использовать для центрирования изображения:

Вертикальное выравнивание

Для того чтобы выравнять вертикально блок в CSS2 нет такого свойства, но это можно сделать указав для внешнего блока свойство ‘display’ в виде ячейки таблицы ‘table-cell’, так как содержимое ячейки таблицы уже можно выравнять по вертикали.

Выравнивание по вертикали в CSS3

В CSS3 это можно сделать с помощью свойства ‘transform’.

Основные принципы:

  • контейнер должен быть относительно позиционированным (position: relative);
  • элемент внутри контейнера имеет абсолютное позиционирование (position: absolute);
  • поместите элемент посередине контейнера с помощью ‘top: 50%’;
  • используйте translate, чтобы переместить элемент вверх на половину своей собственной высоты.

Есть еще один способ это сделать с помощью свойства  ‘display’ и его значения ‘flex’.

Вертикальное и горизонтальное выравнивание в CSS3

Способ с абсолютным позиционированием:

Способ с помощью flex: