将内容区域垂直居中，直到达到一定高度？ [英] Vertically center a content area until it reaches a certain height?

问题描述

如何允许动态（高度变化）内容区域在用户屏幕上垂直居中（与屏幕大小无关），直到它到达只有 100px 页面顶部的可用空间还剩吗？

How do I allow a dynamic (changing in height) content area to be vertically centered on the users screen (regardless of screen size), UNTIL it reaches the point where there is only 100px left of free space at the top of the page?

下面是一个图：

Here's a diagram:

我不确定是否可以仅使用CSS还是javascript-因此欢迎您提出所有建议。

I'm not entirely sure whether the solution to this problem will use only CSS or javascript - so all suggestions are welcome.

推荐答案

我的解决方案考虑到您希望内容以整个页面为中心而不仅仅是在下面的空间。我使用负边距实现了这一目标。

My solution takes into account that you want your content to be centered on the whole page and not just "in the space below". I used negative margins to achieve this.

在此处查看工作示例：

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->作品

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

更新：

我使用了 box-sizing：border-box; ，但是Firefox需要额外的 -moz-box-sizing：边框; 。现在它也可以在Firefox中使用。

I used box-sizing: border-box; but Firefox required an additional -moz-box-sizing: border-box;. Now it works also in Firefox.

这篇关于将内容区域垂直居中，直到达到一定高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！