使用jQuery居中div

Question

我有一个div $("#organizer_listings_container")最初使用CSS margin: 0 auto;居中margin: 0 auto; 当用户单击按钮时，使用jQuery来增加其宽度。 调整大小后，我将使用以下代码将调整后的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％。 但是，如果只看到盒子，而只使用容器将其居中放置，则不需要此要求。