Как выровнять блок по центру на странице с помощью CSS

Существует несколько способов выравнивания блока по центру с помощью CSS. Рассмотрим три основных подхода.

1. Использование свойств text-align и margin: auto

Один из простых способов выравнивания блока по центру - задать свойство text-align: center; для родительского элемента, а затем применить свойство margin: auto; для самого блока. Этот метод работает для блоков с фиксированной шириной.

Пример кода:

HTML:

html

  
Центрированный блок

CSS:

css
.container {
  text-align: center;
}
.box {
  width: 200px;
  margin: auto;
}

2. Использование свойства display и text-align

В этом подходе мы задаем блоку свойство display: inline-block; и затем устанавливаем text-align: center; для родительского элемента.

Пример кода:

HTML:

html

  
Центрированный блок

CSS:

css
.container {
  text-align: center;
}
.box {
  display: inline-block;
}

3. Использование позиционирования и transform

Этот подход наиболее сложный, но он позволяет выровнять блок по центру страницы, даже если он имеет переменную ширину.

Пример кода:

HTML:

html

  
Центрированный блок

CSS:

css
.container {
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Здесь мы устанавливаем родительскому элементу свойство position: relative;, чтобы его дочерний элемент, блок с классом "box", был позиционирован относительно его. Затем мы задаем блоку position: absolute;, чтобы его можно было переместить в центр и установить top: 50%; и left: 50%; для перемещения блока в центр. И, наконец, мы используем свойство transform: translate(-50%, -50%); для точного центрирования блока.