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


При верстки часто часто возникает надобность вертикально выравнять какой-либо блок, не зная его фиксированного размера.  Для этих целей отличным решением будет использование свойств flex.

HTML разметка

 

 

CSS

align-items: center — выравнивает дочерние элементы контейнера с одинаковым отступом или без.

 

 

Результат: