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

我有一个码头的图标，我想垂直居中。当然，这会根据屏幕分辨率等而有所不同。我目前所做的是获得父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。

< P>你想让你的图标总是位于屏幕中间吗？如果你的图标没有那么大，为什么不：

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

编辑

正如Zee Tee所提到的，您当然需要按如下方式设置边距顶部：

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

---

如果不打算使用

$（window）.height（）

，则使用

$（“#侧栏”）.outerHeight（），因此您可以在元素上获得所有其他好的内容，如填充和边距

另外，不要忘记用户调整窗口大小的时间。使用
.resize（）用于此。
您不能使用
bottom:0将社交码头容器放到底部吗？抱歉，如果我误解了你的意思，那么它到底是如何工作的？我正在尝试将容器居中，而不是将其与底部对齐。安迪，图标和容器根本不显示。是吗？您可能需要一些
页边距顶部：-
图标非常大，这会将容器从页面上推出，因为我在该元素中将溢出设置为隐藏。50%会将其向下移动到页面的一半，但不会垂直居中。您需要使用
margin top:-Npx
N=对象高度的一半。调整大小是我将包括的内容，但是，现在我担心图标会显示出来。至于侧边栏参数，我没有包括任何边距等。对于
socialDockHeight
，将返回什么值？你检查过了吗？啊，问题出在这里，Safari和Chrome返回了我想要的值。IE和FF返回的值非常大。你知道为什么会这样吗？现在很明显，容器被推离了页面，如果不看HTML+CSS，我就不知道了，我在这里要说的是，尝试获取另一个对象的高度或位置，甚至可能是窗口。无论如何，我现在要做的就是删除容器高度的变量赋值，因为我可以通过警报检索它。我已经硬编码了一半的高度，一切都很好。谢谢你，谢谢你！