垂直居中内容区域直到它达到某个高度? [英] Vertically center a content area until it reaches a certain height?

问题描述

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

这是一个图表:

我不完全确定该问题的解决方案是仅使用 CSS 还是 javascript - 所以欢迎提出所有建议.

解决方案

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

在此处查看工作示例:

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

HTML:

<div id="表格"><div id="单元格"><div id="content">一些内容</div>

CSS:

#container {宽度:100%；高度:100%；填充:100px 0;边距顶部:-100px；}#桌子 {显示:表；宽度:100%；高度:100%；边距顶部:100px；}#细胞 {显示:表格单元格；垂直对齐:中间；}#内容 {背景颜色:浅蓝色；宽度:50%；边距:0 自动；}

已测试:

• IE 9 Win7 --> 工作
• Chrome 30 Mac --> 可以使用
• Safari 7 Mac --> 工作
• Firefox 25 Mac --> 工作

更新:

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

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:

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.

See the working example here:

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

Tested:

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

Update:

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

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