跨浏览器：如何根据视口高度调整元素的垂直位置？

Question

我有一个我想垂直居中的图标码头。这当然会因屏幕分辨率等而有所不同。我目前所做的是获得父DIV的高度，其大小为视口的100％：

    var pageHeight = $('#sidebar').height();

然后，我得到了图标容器的高度，因为这在CSS中没有预先确定：

    var socialDockHeight = (document.getElementById('social_dock_container').offsetHeight * numberOfIcons);

注意：由于某些原因，这只会检索一个图标的高度，可能是因为它们是以数组编码的？然后我计算新位置，并通过jQuery将其分配给元素：

    var y = (pageHeight / 2) - (socialDockHeight / 2);
    $("#social_dock_container").css({ 
            top: y + "px"
    }).show();

这适用于Chrome，但不适用于IE，FF或Safari。

Answer 1

您想让您的图标始终位于屏幕中间吗？如果你的图标不是那么大，为什么不这样做：

#social_dock_container
{
    position: absolute;
    top: 50%;
}

修改

正如Zee Tee所说，当然你需要设置margin-top如下：

$("#social_dock_container").css('margin-top', '-' + socialDockHeight / 2 + 'px' );

Answer 2

如果您不打算使用$(window).height()，请使用$('#sidebar').outerHeight();，这样您就可以获得所有其他好东西，比如元素上的填充和边距。

另外，请不要忘记用户何时调整窗口大小。请使用.resize();。