Центрирование элементов в CSS для новичков бывает очень сложным, я даже скажу что опытные верстальщики не всегда способны правильно отцентрировать элементы не прибегая к Flexbox или Grid CSS. В данной статье я расскажу обо всех вариантах правильного центрирования элементов в CSS.
ЦЕНТРИРОВАНИЕ ПО ГОРИЗОНТАЛИ
Центрирование по горизонтали inline-* элементов (текст или ссылки)
Для того чтоб отцентрировать текст или ссылку, достаточно родительскому элементу указать свойство text-align:center; и тогда все inline-* элементы будут отцентрированы, давайте посмотрим пример:
|
1 2 3 |
.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.
|
1 2 3 4 |
.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;
|
1 2 3 4 |
.flex-center{ display:flex; justify-content: center; } |
Ниже я привел пример разместив по несколько блоков в линию чтоб они все центрировались по своему родителю. Как мы видим если у нас один элемент — он по центру, когда два — они также становятся по центру. Также я не ограничивал ширину блоков и они подстраиваются по ширине текста внутри их.
See the Pen FLEXBOX FLEX CENTER by Denis Koblya (@denis-koblya) on CodePen.dark
ЦЕНТРИРОВАНИЕ ПО ВЕРТИКАЛИ
Центрирование по вертикали inline-* элементов (текст или ссылки)
Для того чтоб отцентрировать текст или ссылку по горизонтальному центру блока, мы можем прибегнуть к такому лайфхаку как одинаковые padding сверху и снизу
|
1 2 3 |
a{ padding: 50px 0; } |
В примере ниже я выставлю несколько ссылок в ряд и задам для них внутренние отступы сверху и снизу
See the Pen VERTICAL CENTER PADDING by Denis Koblya (@denis-koblya) on CodePen.dark
Также можно отцентрировать элемент по вертикали другим способом, задав одинаковую высоту блока и его line-height (но это сработает только если у вас текст в одну линию)
|
1 2 3 4 |
.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;
|
1 2 3 4 5 6 7 8 |
.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;
|
1 2 3 4 5 6 7 8 |
.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 строчки, но если вы используете элемент высота которого должна быть неизменна, то ловите следующий лайфхак по вертикальному центрированию блока:
|
1 2 3 4 5 6 7 8 9 |
.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%);
|
1 2 3 4 5 6 7 8 |
.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
