Как задать центрирование по вертикали?

Question

[DeniSidorenko]

Привет есть такая структура

<header>
<div class='header-block__one'> Content</div>
<div class='header-block__two'> Content</div>
<div class='header-block__three'> Content</div>
<div class='header-block__four'> Content</div>
<div class='header-block__five'> Content</div>
</header>

header{
height: 50px;}

header div{
 display: inline-block}

Я описал не весь цсс и html код но хочу что бы вы поняли. Так вот макс высота для всех эти ИНЛАЙНОВЫХ блоков 50px, каждый имеет разную высоту, 22, 30, 45. Так вот как мне центрировать по вертикали относительно header'a?

Comments

[Сергей delphinpro]

header > div {
  vertical-align: center;
}

header {
  display: flex;
  align-items: center;
}

[DeniSidorenko]

Сергей, Спасибо хороший вариант

[Сергей delphinpro]

DeniSidorenko, там два варианта )

Answer 1

[Павел]

howtocenterincss.com

Answer 2

[Aleksey Solovyev]

Ну, допустим, flex-box

header{
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

Answer 3

[Gortyser]

Лучше не задавать фиксированную высоту, потом будут проблемы