Как выровнить по высоте по центру flex контейнер с учетом плашки меню с position: fixed;?

Question

[Raul Abdullin]

После того, как закрепил панель меню наверху с помощью position: fixed;
Появилась проблема, а именно в шапке задан дисплей флекс и выровнил по высоте по центру (прикрепляю код).
До того, как я задал панели меню position: fixed; выравнивалось по центру с учентом меню, но теперь меню не учитывается и визуально текст с кнопкой не по центру (прикрепляю скрин).
Как теперь можно по высоте по центру всё таки выровнить?

.main-header .presentation {
	background: fixed url(../img/pink-box.png) no-repeat 110% 105%,
							#E7F3FE;
	background-size: 55%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

Comments

[Ankhena]

Вспомнить геометрию и компенсировать отступ, например, задав нижний padding размером с высоту панельки или уменьшив высоту голубого блока или увеличить высоту блока с текстом на половину высоты панельки или еще каким-нибудь способом, благо возможностей полно.

Answer 1

[Andrey_Hmytron]

.main-header .presentation
height: calc(100vh - высота полашки меню)

body
padding-top: высота плашки меню