javascript - 使用 jQuery 居中 div

Question

我有一个 div $("#organizer_listings_container") 最初使用 CSS margin: 0 auto; 居中，当用户点击按钮。调整大小后，我使用以下代码将调整后的 div $("#organizer_listings_container") 居中。

调整大小代码

// Center content when width changes
if($("#organizer_listings_container").css("position") != 'absolute') {
    $("#organizer_listings_container").css("position","absolute");
    var left = ( $(window).width() - $("#organizer_listings_container").width() ) / 2 + "px";
    $("#organizer_listings_container").css('left', left);       // set initial 'left'
}
left = ( $(window).width() - ( 852 ) ) / 2  + "px";
$("#organizer_listings_container").animate({'left': left}); // animate to final 'left'  

问题:当我添加一个新的 div(使用 jQuery show() 使其可见)时，它出现在 #organizer_listings_container 上方，#organizer_listings_container 向下移动，这是正确的。现在，当我删除这个新添加的 div 时，#organizer_listings_container 不会向上移动!

我怀疑这是由于所使用的 jQuery 居中代码要求的绝对定位所致。当新添加的 div 被删除时，如何使调整大小的 div 恢复原状？

使用 jQuery 计算新添加的 div 的高度，然后通过将 top 偏移计算出的高度来向上移动调整大小的 div 似乎比我想要的更困惑

Answer 1

您可以避免必须使用 jquery 并将一个类添加到新添加的 div 并以顶部位移居中，如下所示:

<div class="container" style="background:blue; width:100%;">
<div class="box" style="background:green; width:50px; height:40px; margin: 0 auto; margin-top:20px;"></div>
</div>

请注意，该类将包含内联样式，这只是一个示例。

您唯一可能需要 jquery 的是确保容器的高度为 100%。但是，如果您只想看到盒子，并且您只是使用容器将其居中定位，那么您就不需要这个要求。