根据高度动态更改div的上边距

Question

我有一个固定在我网页侧面的div。我需要将div垂直居中。使用CSS轻松完成:(注意：div的基本高度为300px;）

#sidePanel { margin: -150px 0 0 0; top: 50%; position: fixed;}

我遇到的问题是这个sidePanel div拥有我的网站导航。当导航打开以显示子元素时，它会在高度上增长，从而影响居中。我需要一些jQuery来重新计算sidePanel div的高度，并应用适当的负边距以保持div居中。这是我正在玩的jQuery：

$("#sidePanel").css("margin-top", $(this).outerHeight());

我没有进行计算以将负值边距设置为高度的一半，但这并没有给出我正在寻找的高度值。有什么建议??

Answer 1

this在这种情况下不引用#sidePanel元素，您需要使用传递到.css()的函数来实现，如下所示：

$("#sidePanel").css("margin-top", function() { return $(this).outerHeight() });

或.each()来电，如下：

$("#sidePanel").each(function() {
  $(this).css("margin-top", $(this).outerHeight());
});

或者缓存选择器，如下所示：

var sp = $("#sidePanel");
sp.css("margin-top", sp.outerHeight());

Answer 2

尝试将边距设置为窗口高度减去div的高度，全部除以2。这应该垂直居中。