kondaaakov
@kondaaakov
Имею что-то похожее на знания о вёрстке.

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

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

Простой пример. Хедер, который выступает на 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;
}


Примерно так это выглядит:
5e76c067c746d241980893.png
  • Вопрос задан
  • 77 просмотров
Решения вопроса 1
wapster92
@wapster92 Куратор тега CSS
Люблю трилогию ME
Чтобы элемент в центре не съезжал, его нужно вывести из потока при помощи pos:a или использовать grid layout
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@SlavaMaxwell
HTML-верстальщик, Frontend developer
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
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы