javascript - 垂直居中内容区域直到达到一定高度？

Question

我如何允许动态(高度变化)内容区域在用户屏幕上垂直居中(无论屏幕尺寸如何)，直到它到达只有 100px 左边的点页面顶部的可用空间？

这是一个图表:

我不完全确定这个问题的解决方案是只使用 CSS 还是 javascript - 所以欢迎所有建议。

Answer 1

我的解决方案考虑到您希望您的内容在整个页面上居中，而不仅仅是“在下面的空间”。我使用负边距来实现这一点。

请参阅此处的工作示例:

http://jsfiddle.net/WkQzw/5/

HTML:

<div id="container">
    <div id="table">
        <div id="cell">
            <div id="content">Some content</div>
        </div>
    </div>
</div>

CSS:

#container {
    width: 100%;
    height: 100%;
    padding: 100px 0;
    margin-top: -100px;
}
#table {
    display: table;
    width: 100%;
    height: 100%;
    margin-top: 100px;
}
#cell {
    display: table-cell;
    vertical-align: middle;
}
#content {
    background-color: lightblue;
    width: 50%;
    margin: 0 auto;
}

测试:

• IE 9 Win7 --> 可以
• Chrome 30 Mac --> 可以
• Safari 7 Mac --> 可以
• Firefox 25 Mac --> 可以

更新:

我使用了 box-sizing: border-box; 但 Firefox 需要额外的 -moz-box-sizing: border-box;。现在它也适用于 Firefox。