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

我有一个固定在我的网页侧面的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。 这应该垂直居中。