如何在响应宽度/高度容器上垂直居中对齐，以提供图像的最大高度或宽度

Question

我正在制作一个摄影网站，当单击图像时，它将全屏显示图像（宽度为100％，高度为90％，底部有一个标签，高度为10％）这是我的示例m尝试做的事情：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;
}

我得到的唯一结果是图像粘贴到了容器的顶部。