Центрирование элементов в CSS для новичков бывает очень сложным, я даже скажу что опытные верстальщики не всегда способны правильно отцентрировать элементы не прибегая к Flexbox или Grid CSS. В данной статье я расскажу обо всех вариантах правильного центрирования элементов в CSS.

ЦЕНТРИРОВАНИЕ ПО ГОРИЗОНТАЛИ

Центрирование по горизонтали inline-* элементов (текст или ссылки)

Для того чтоб отцентрировать текст или ссылку, достаточно родительскому элементу указать свойство text-align:center; и тогда все inline-* элементы будут отцентрированы, давайте посмотрим пример:

.center {
  text-align: center;
}

В примере ниже мы видим что родительский блок получает class=»center» а в самом CSS мы этому класу присвоили значение text-align:center; но не забываем что это работает только для инлайновых элементов.

See the Pen Inline text center by Denis Koblya (@denis-koblya) on CodePen.dark

 

Центрирование блочного элемента

Для того чтоб сделать так чтоб блочный элемент (display: block;) был по центру его родителя, мы должны прописать для него свойства margin-left: auto; и margin-right: auto; либо сохратить эту запись как margin: 0 auto; и добавить ему ширину width.

.block-center{
margin: 0 auto;
width: 150px;
}

Давайте рассмотрим пример, так как у нас элемент это DIV, он автоматически является блочным элементом (display: block), для того чтоб выровнять блок DIV по центру (черный квадрат) мы для него прописали два свойства: margin и width. ВНИМАНИЕ: без свойства width это не сработает!

See the Pen CSS BLOCK CENTER by Denis Koblya (@denis-koblya) on CodePen.dark

 

Центрирование элементов при помощи flexbox

Для того чтоб отцентрировать блочный элемент по горизонтали, мы должны применить два свойства для родительского контейнера: display:flex; и justify-content: center;

.flex-center{
  display:flex;
  justify-content: center;
}

Ниже я привел пример разместив по несколько блоков в линию чтоб они все центрировались по своему родителю. Как мы видим если у нас один элемент — он по центру, когда два — они также становятся по центру. Также я не ограничивал ширину блоков и они подстраиваются по ширине текста внутри их.

See the Pen FLEXBOX FLEX CENTER by Denis Koblya (@denis-koblya) on CodePen.dark

 

ЦЕНТРИРОВАНИЕ ПО ВЕРТИКАЛИ

Центрирование по вертикали inline-* элементов (текст или ссылки)

Для того чтоб отцентрировать текст или ссылку по горизонтальному центру блока, мы можем прибегнуть к такому лайфхаку как одинаковые padding сверху и снизу

a{
padding: 50px 0;
}

В примере ниже я выставлю несколько ссылок в ряд и задам для них внутренние отступы сверху и снизу

See the Pen VERTICAL CENTER PADDING by Denis Koblya (@denis-koblya) on CodePen.dark

Также можно отцентрировать элемент по вертикали другим способом, задав одинаковую высоту блока и его line-height (но это сработает только если у вас текст в одну линию)

.center-text{
  height: 100px;
  line-height: 100px;
}

Данным методом можно легко пользоваться например для ссылок в меню или короткого текста, именно короткого, так как если текста будет больше чем ширина блока, он перенесется на следующую строку и уже будет выпадать за блок, можете протестировать сами дописав больше текста. Для запрета переноса текста добавьте в стили блока свойство white-space: nowrap;

See the Pen VERTICAL ALIGN LINE-HEIGHT by Denis Koblya (@denis-koblya) on CodePen.dark

Также существует еще один способ отцентрировать по горизонтали содержимое родительского блока. Для этого добавьте в родитель display: table; и задайте его высоту, а для дочернего элемента, например <p>, примените свойства display: table-cell; и vertical-align: middle;

.center-table {
  display: table;
  height: 250px;
}
.center-table p {
  display: table-cell;
  vertical-align: middle;
}

See the Pen VERTICAL ALIGN DISPLAY TABLE by Denis Koblya (@denis-koblya) on CodePen.dark

Теперь перейдем к способу центрирования по вертикали при помощи flexbox, для этого мы родителю дадим свойства display: flex; и justify-content: center; а также добавим свойство flex-direction: column;

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;

  height: 200px;
  width:200px;
}

Что мы сделали? Мы родительскому элементу задали свойство display:flex; затем свойством flex-direction: column; сказали что все элементы внутри него выстроить в колонку, а через justify-content: center; мы сказали что поставить наш параграф по центру.

Но помните, что это актуально, только если родительский контейнер имеет фиксированную высоту (px,% и т. д.)

See the Pen Flexbox vertical center by Denis Koblya (@denis-koblya) on CodePen.dark

Если вы знаете высоту элемента

Зачастую высота элемента у нас не бывает фиксированной, например у вас есть текст который на дескотпе помещается в две строчки, а на планшете уже 3-4 строчки, но если вы используете элемент высота которого должна быть неизменна, то ловите следующий лайфхак по вертикальному центрированию блока:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}

На примере ниже вы можете видеть что родительский клас имеет высоту и свойство position:relative; для того чтоб дочерний элемент мог применить свойство position: absolute; затем мы говорим ему отступить от верха 50% свойством top: 50%; задаем ему фиксированную высоту 200px и так как мы знаем высоту (100px), мы отступаем отрицательным отступом вверх на половину нашей высоты margin-top:-50px;

See the Pen Absolute center align by Denis Koblya (@denis-koblya) on CodePen.dark

Если мы не знаем высоту элемента

Если мы не знаем нашу высоту как в предидущем примере, мы должны повторить все тоже самое, только вместо отрицательного отступа, мы должны применить свойство transform: translateY(-50%);

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Рассмотрим пример

See the Pen Vertical align transform by Denis Koblya (@denis-koblya) on CodePen.dark