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

【问题标题】：Dynamically change the top margin of a div based on its height根据高度动态更改 div 的上边距
【发布时间】：2010-11-11 06:25:53
【问题描述】：

我有一个固定在网页侧面的 div。我需要那个 div 垂直居中。使用 CSS 轻松实现：（注意：div 的基本高度为 300px；）

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

我遇到的问题是这个侧面板 div 包含我的网站导航。当导航打开以显示子元素时，它的高度会增加，从而使居中变得混乱。我需要一些 jQuery 来重新计算侧面板 div 的高度并应用适当的负边距以保持 div 居中。这是我正在玩的 jQuery：

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

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

【问题讨论】：

标签： jquery

【解决方案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());

【讨论】：

【解决方案2】：

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

【讨论】：