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

Плюсануть
Поделиться
Класснуть

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

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

Как сделать выравнивание div по центру

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

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

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

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

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

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

Последнее изменение записи: 30.11.2016 | Рубрика: Работа | Метки: , ,
Плюсануть
Поделиться
Класснуть