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

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 的内容，看看它的工作原理与它的高度无关。