Как работает вертикальное центрирование?

Question

[Андрей К.]

Всем привет. Я немного профан, но, как понимаю, полное центрирование одного элемента в другом - штука сложна. Вопрос заключается в следующем: как сделать полное центрирование (чтобы и по вертикали и по горизонтали) так, чтобы в родительском элементе можно было ещё размещать элементы не в ущерб элементу по центру (чтобы не съезжал и не сдвигался)?

Простой пример. Хедер, который выступает на 50px по высоте. Нужно, чтобы logo (там просто текст) был ровно по центру этого хедера.

header {
	display: block;
	height: 100px;
	width: 100%;
	background-color: white;
}

.logo {
	font-family: MonB;
	display: block;
	margin: 0 auto;
	width: 70%;
	text-align: center;
}

Примерно так это выглядит:

Answer 1

[WapSter]

Чтобы элемент в центре не съезжал, его нужно вывести из потока при помощи pos:a или использовать grid layout

Answer 2

[Vladislav]

1) Position, если высота известна https://codepen.io/anna_blok/pen/eqOVQN
2) Position, если высота не известна https://codepen.io/anna_blok/pen/oKvYdW
3) Использование псевдо-элемента https://codepen.io/anna_blok/pen/rXBmag
4) CSS Flexbox (блок растянут полностью) https://codepen.io/anna_blok/pen/YmKaGv
5) CSS Flexbox (блок имеет ограничения по ширине и высоте) https://codepen.io/anna_blok/pen/mNbmmB
6) CSS Grid https://codepen.io/anna_blok/pen/dxbWKR
7) Table & Table-cell https://codepen.io/anna_blok/pen/KOPmjP