如何垂直对齐具有不同高度的div？

Question

我在弹出我的页面 ，我需要弹出来垂直居中的DIV。 将会有更多，因为它是Tumblr，并且博客中的帖子不同，因此div的高度会有所不同。 我需要将其垂直居中放置，以使内容向上和向下扩展。 无论如何都可以做到？

Answer 1

使用以下简单的HTML：

<div id="wrap">
    <div id="holder">
        <div id="modal">some<br>content<br>in<br>here</div>
    </div>
</div>

wrap是您希望modal垂直居中的内容，但是需要使用holder ，因为使用以下CSS：

#wrap {
    height:300px;
}

#holder {
    margin:0 auto;
    width:60px; height:auto;
    position:relative; top:50%;
}

#modal {
    text-align:center;
    margin:0 auto;
    width:50px;
    position:relative;
}

... holder和modal的顶部将在wrap居中，但是我们希望此动态内容的中心在中部，因此需要一些简单的Javascript：

document.getElementById('modal').style.top = 
    "-" + document.getElementById('holder').offsetHeight/2 + "px";

...我们将modal上移了holder和瞧的自动高度的一半！ 到了！ 您可以看到一个带有背景色的示例，以直观地指示此处发生的情况： http : //jsfiddle.net/jRSZV/

尝试更改modal的内容，以查看其高度如何均可正常工作。

Answer 2

var w = $(window);
$('.modal-dialog').css({
    'position': 'absolute',
    'top': Math.abs(((w.height() - $('.modal-dialog').outerHeight()) / 2) + w.scrollTop())
    //'left': Math.abs(((w.width() - $('.modal-dialog').outerWidth()) / 2) + w.scrollLeft())
});

$('html, body').animate({
    scrollTop: $('.modal-dialog').offset().top - 50
}, 500);

这一段脚本将满足您的要求。 $（'。modal-dialog'） -这是您要垂直集中的div。 请参阅代码上的注释行。 如果您还想水平居中，请取消注释。

Answer 3

对于垂直对齐的div，请参见http://stylizedweb.com/2008/02/01/vertical-align-div/ ，这可能会有所帮助！

但是就像@blender所说的那样，这并不动态。 因此，我将浏览http://plugins.jquery.com/project/valign

Answer 4

哦，不，不是CSS的垂直居中。 它很复杂，但请在此处阅读： http : //www.jakpsatweb.cz/css/css-vertical-center-solution.html 。

如果您是在JS上设置的，则只需像这样放置元素即可（错误键入，90％的机会将不起作用）：

$('#element').css('top', parseInt(($(document).height() - $(this).height()) / 2));
$('#element').css('left', parseInt(($(document).width() - $(this).width()) / 2));

它不是真的很优雅，但可能会起作用。 祝您好运（我会调整该动画。这是一个不错的设计，但是动画重叠会降低其质量）。