Как выровнять блок по центру по вертикали в хедере?

Question

[skejejsj]

<header class="site-header">
		<div class="container">
			  <div class="title">
				pisun
			  </div>
		</div>
</header>

* {
	margin: 0px;
	padding: 0px;
}

body {
	background-color: #100f11;
	background-size: cover;
	height: 100px;
}

html {
	height: 100px;
}

.site-header {
	background: rgb(159,0,218);
	background: linear-gradient(90deg, rgba(159,0,218,1) 0%, rgba(252,82,255,1) 100%);
	position: fixed;
	width: 100%;
	height: 50px;
	-webkit-box-shadow: 0px 0px 13px 2px rgba(150, 0, 255, 0.2);
	-moz-box-shadow: 0px 0px 13px 2px rgba(150, 0, 255, 0.2);
	box-shadow: 0px 0px 13px 2px rgba(150, 0, 255, 0.2);
}

.title {
	font-family: 'Rubik', sans-serif;
	color: white;
}

Comments

[Alex_mos]

Если правильно понял, контейнеру задать flex justify-content center

[skejejsj]

Alex_mos, ой, не правильно написал, по вертикали не знаете как?

[Alex_mos]

skejejsj, вот

[skejejsj]

Alex_mos, а можно сразу указать? плииииз

[Дмитрий]

justify-content: center;
//либо
align-items: center;

Answer 1

[Андрей Федоров]

Добавьте

.title {
   margin: auto;
}
.container {
   display: flex;
   height: inherit;
}

Comments

[skejejsj]

не работает

[Андрей Федоров]

skejejsj, Это уже второй вопрос почему У ВАС не работает. Идите в отладчик и смотрите что там к чему...

[Sergei Nazarenko]

.container {
   display: flex;
align-items: center;
   height: inherit;
}

[Андрей Федоров]

Sergei Nazarenko, align-items не нужен, потому, что у .title, есть margin: auto.

[Sergei Nazarenko]

Андрей Федоров, margin: auto выравнивает по горизонтали. А ему надо по вертикали

[Андрей Федоров]

Sergei Nazarenko, нет. Внутри контекста flex выравнивание происходит и по горизонтали, и по вертикали.

[Sergei Nazarenko]

Андрей Федоров, а ну да, пардон.

Answer 2

[Bauyrzhan Akhmetov]

Изучи flexbox быстро и удобно