将内容区域垂直居中，直到达到一定高度？
亚当·麦克阿瑟
如何允许动态（高度变化）内容区域在用户屏幕上垂直居中（与屏幕大小无关），直到它到达100px页面顶部仅剩可用空间的位置？
这是一个图： 
我不确定要解决此问题的解决方案是否仅使用CSS或javascript-因此欢迎所有建议。
托尼·龙纳多
我的解决方案考虑到您希望您的内容位于整个页面的中心，而不仅仅是“在下面的空间”。我使用负边距实现了这一目标。
在这里查看工作示例：
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中使用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
将内容区域垂直居中，直到达到一定高度？
- 2
PostgreSQL选择直到达到一定的总数并锁定
- 3
等待文件句柄，直到达到一定大小
- 4
写入文件直到达到一定大小
- 5
如何将文件移动到文件夹，直到达到一定大小？
- 6
使内容力DIV垂直增长直到达到最大高度，然后水平增长
- 7
JS-在字符串中创建空格，直到达到一定宽度
- 8
jQuery slideToggle（）达到一定高度？
- 9
匹配大写字母并填写后续字母，直到达到一定的字符串长度
- 10
Love2D在给定时间内旋转图像，直到达到一定角度
- 11
互相重复列表的元素，直到达到一定长度
- 12
jQuery追加元素，直到达到一定数量
- 13
PostgreSQL，选择行直到达到并超过一定数量
- 14
分度固定，直到出现一定的高度故障
- 15
PDF达到一定大小后无法添加内容
- 16
在将内容垂直居中时设置容器的响应高度
- 17
如何在Swift中使用数组的值执行求和运算，直到达到一定数量？
- 18
在列中无限期重复函数，直到值达到一定水平
- 19
如何固定滚动div后一定的高度和到达其他div后停止？
- 20
css：div高度可以灵活地到达屏幕底部并留有一定的余量
- 21
超出窗口高度的垂直居中内容
- 22
当达到一定高度的子控件时显示并调整GridRow的大小
- 23
使用MATLAB将参数加倍，直到达到特定值
- 24
提交时将值增加 1 直到达到 5
- 25
延长接触时增加跳跃高度，直到达到最大高度
- 26
文字区域随着内容的增长和缩小而达到最大高度
- 27
当高度未知时，如何将 div 的内容垂直居中对齐？
- 28
在Linux中达到一定大小后，停止将Python脚本写入文件
- 29
在Linux中达到一定大小后，停止将Python脚本写入文件
我来说两句