Html 如何将此图像垂直放置？

我有一个div作为主包装器，然后有一个image包装器div作为image包装器，还有一个

我想要的是，在某些较低的分辨率（例如1300px）下，图像包装器div保持垂直对齐。现在，当您看到它时，它不是垂直对齐的。顶部填充使图像包装div保持在顶部，而底部有一个很大的间隙

以下是网站：

它发生在主页上。中心图像

以下是主分区的ID：

#homepage-image

下面是这三个的CSS

#homepage-image
{
    padding: 20px 20%;
    border: 2px #CCC solid;
    background-color: white;
    text-align: center;
    overflow: hidden;
    height: 540px;
}
#homepage-image div
{
    height: 495px !important;
    padding: 0px !important;
}
#homepage-image div img
{
    width: 100%
}

下面是元素的标记：

<div class="image" id="homepage-image">
                <div style="height: 520px; overflow: hidden;">
                    <img src="photo/homepage/image.jpg" alt="" title="">
                </div>

            </div>

CSS位于style.CSS行187中

如果你能进行现场编辑，我将不胜感激。提前感谢

<div class="image" id="homepage-image">
   <div style="height: 520px; overflow: hidden; white-space: nowrap;">
      <span class="keepImgVerCenter"></span>
      <img src="photo/homepage/image.jpg" alt="" title="">
   </div>
</div>

.keepImgVerCenter{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.keepImgVerCenter{
显示：内联块；
身高：100%；
垂直对齐：中间对齐；
}

希望这能有所帮助。

这不管用吗