Как выровнять по вертикали середину на адаптивном контейнере ширина / высота, который дает максимальную высоту или ширину изображения

Question

Я делаю веб-сайт с фотографиями, и когда на изображение нажимают, оно полноэкранное изображение (ширина 100% и высота 90%, внизу есть ярлык с высотой 10%). Вот пример того, что я 'Я пытаюсь сделать: https://www.schultzphoto.com/wp-content/uploads/2016/01/alaska-landscape-photography-001-northern-lights-reflection.jpg (Уменьшить размер окна и изменить ширину / высоту). У меня есть изображение, совпадающее с максимальной высотой или шириной в зависимости от размеров окна просмотра, и когда оно использует максимальную высоту,изображение выровнено по горизонтали.Однако, когда изображение достигает ширины области просмотра, изображение прилипает к верхней части экрана, а не к вертикальному выравниванию

Я попробовал многие из простых вертикальных выравниваний и приемов, которые используют несколько контейнеров и размер шрифтаи высоту строки, но ни один из них не работал корректно с адаптивным веб-дизайном

HTML:

<div class="fullpicarea"> <!--Container-->
    <img src="../Images/Australia/Australia34.jpg" class="fullpic" id="Pic34"><!--Image-->
</div>


CSS:

.fullpic {
    max-width: 100%;
    max-height: 100%;
    z-index: 10;
    position: relative;
    margin: auto;
    vertical-align: middle;
}

.fullpicarea {
    z-index: 1;
    width: 100%;
    height: 90vh; /*Only 90 because there is a label for location of Image with 10vh*/
    position: fixed;
    text-align: center;
    vertical-align: middle;
    top: 0;
}

Единственный результат, который я получил, это изображение, прикрепленное к вершинеконтейнер. * +1010 *