Как отцентрировать элемент CSS

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

1. Центрирование по горизонтали

Для центрирования элемента по горизонтали можно использовать следующие свойства:

.element {
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* максимальная ширина элемента */
}

В данном примере элемент будет центрироваться по горизонтали внутри своего родительского контейнера. Свойство margin-left и margin-right задают одинаковое значение «auto», что автоматически устанавливает элемент по центру. Чтобы избежать растягивания элемента на всю ширину контейнера, устанавливается максимальная ширина элемента.

2. Центрирование по вертикали и горизонтали

Для центрирования элемента по вертикали и горизонтали можно использовать свойства transform и position:

.parent {
  position: relative;
}
.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

В данном примере контейнер родителя устанавливается в позицию relative, а элементу задаются свойства position, top, left и transform. Свойства top и left устанавливают положение элемента относительно верхнего левого угла родительского контейнера. Свойство transform используется для центрирования элемента по горизонтали и вертикали. Для этого значение translate(-50%, -50%) смещает элемент на -50% своей ширины и высоты, что автоматически выравнивает его по центру контейнера.

3. Центрирование одного слова внутри текста

Для центрирования одного слова внутри текста можно использовать свойство text-align. Для этого слово должно быть обернуто в отдельный элемент, например <span>:

.parent {
  text-align: center;
}
.word {
  display: inline-block;
}

В данном примере родительскому контейнеру задается свойство text-align: center, что автоматически центрирует все дочерние элементы по горизонтали. Слово, которое нужно центрировать, задается отдельным элементом с свойством display: inline-block. Это свойство разрешает элементам занимать только ту площадь, которая необходима для отображения содержимого, и позволяет центрировать их по горизонтали.