Question

我在MY PAGE有一个弹出窗口，我需要弹出垂直居中的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

垂直对齐div看这里http://stylizedweb.com/2008/02/01/vertical-align-div/，这可能会有所帮助！

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

Answer 3

哦，不，不是垂直居中的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));

它不是很优雅，但它可能有用。祝你好运（我会调整那个动画。这是一个很好的设计，但动画重叠会降低它的质量。）

Answer 4

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);

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

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

4 个答案: