Як вирівняти блок по центру сторінки за допомогою CSS

Через запуск однієї студії я став частіше робити деякі технічні дрібниці. Десь код підправити, коли термін вже горить, десь трохи верстку змінити. Розкачую скилл, плюс попутно ділюся результатами в блозі.

Іноді виникає проблема - потрібно відцентрувати блок рівно в середині сторінки, по горизонталі та по вертикалі. Завдання хоч і проста, дійсно придатних рішень дуже мало. Практично скрізь одні милиці.

Зараз же все стало куди простіше, завдяки новому властивості Flexbox. З його допомогою можна вирішити цю проблему, причому це робиться набагато простіше, ніж раніше! Всього кілька рядків коду, не потрібно вказувати розміри блоків і все це - адаптивно. Казка!

Відразу покажу результат:

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

Робиться наступним чином. Прописуючи "flex" в "display" ми активуємо підтримку flexbox. Властивості "justify-content" і "align-items" зі значенням "center" вирівнюють блок саме по центру (горизонтально і вертикально).

От і все. З такими властивостями необхідний блок буде вирівнюватися прямо по центру.