Вертикальне центрування з допомогою CSS Flexbox

Flexbox - рішення, яке позбавляє розробників від кошмарів розмітки документа за допомогою CSS. У цього інструмента ще довгий шлях розвитку, проте вже зараз з допомогою Flexbox можна з легкістю вирішити найдавнішу проблему — вертикальне центрування елемента. Зараз ви самі переконаєтесь в тому, наскільки це елементарно!

Демо

<div class="flexbox-container">
   <div>Blah blah</div>
   <div>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
</div> 

Але стилі ми будемо задавати тільки батьківському:

.flexbox-container {
   display: -ms-flex;
   display: -webkit-flex;
   display: flex;
   -ms-flex-align: center;
   -webkit-align-items: center;
   -webkit-box-align: center;
   align-items: center;
}

Як бачите, простішим цей код могла б зробити тільки відсутність дублікатів з вендорними префіксами. Також, великі надії подає спосіб вертикального центрування без використання Flexbox, але, як би там не було, ми спостерігаємо гарну тенденцію, і в майбутньому цієї проблеми зовсім не існуватиме. Я не наполягаю на використанні методу з Flexbox, проте не варто забувати про його.

Джерело: davidwalsh.name/css-vertical-center-flexbox