jQuery Cycle中垂直居中的图像（响应）

Question

我正在尝试使用jQuery Cycle创建一个图像旋转器。该图像有一些响应的大小调整组件（在这个阶段不是一个完全响应的站点...我知道......这仍在开发中）。基本上我希望图像居中，因为它与浏览器一起在具有定义高度的空间中进行调整（需要在大屏幕上查看才能看到这一点）。我可以将图像放在垂直居中而没有旋转器功能，但我的jQuery函数确定图像的定位在页面加载和浏览器调整大小时执行...而不是当图像随循环旋转时。它最初看起来不错，但稍微调整浏览器大小，你会看到图像向下移动。

这是垂直居中的代码：

var imageHeight, overlap, container = $('.banner'); 

function centerImage() {
    imageHeight = container.find('img').height();
    overlap = (520 - imageHeight) / 2;
    container.find('img').css('margin-top', overlap);
}

$(window).on("load resize", centerImage); 

以防万一，这是我的Cycle函数调用：

$('#banner_items').cycle({ 
    speed:  1000,
    timeout: 3000,
    slideResize: 0,
    slideExpr: '.banner'        
}); 

该网站的链接是： www.envisiondemo.com/planview

有关如何一起工作的任何建议吗？