Сышышь ты, выходи сюда,
поговорим !

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

Опубликовано: 02.09.2018

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

Как центрировать в CSS | How to center in css



Из-за запуска одной студии я стал чаще делать некоторые технические мелочи. Где-то код подправить, когда срок уже горит, где-то чуть вёрстку изменить. Раскачиваю скилл, плюс попутно делюсь результатами в блоге.

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


Изучение CSS/CSS3 | #10 - Позиционирование блоков в CSS + создание небольшого веб сайта

Сейчас же всё стало куда проще, благодаря новому свойству Flexbox . С его помощью можно решить эту проблему, причём это делается куда проще, чем раньше! Всего несколько строчек кода, не нужно указывать размеры блоков и всё это – адаптивно. Сказка!


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

Сразу покажу результат:

See the Pen Выравнивание элемента по центру (горизонтально и вертикально) by Ruslan Banochkin ( @Banochkin ) on CodePen .

Делается следующим образом. Прописывая "flex" в "display" мы активируем поддержку flexbox. Свойства "justify-content" и "align-items" со значением "center" выравнивают блок именно по центру (горизонтально и вертикально).

Вот и всё. С такими свойствами необходимый блок будет выравниваться прямо по центру.

rss