Javascript 将内容区域垂直居中，直到达到某个高度？

如何允许动态（高度变化）内容区域垂直居中于用户屏幕上（无论屏幕大小），直到页面顶部只剩下

100px

可用空间

下面是一张图表：

---

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

有趣的问题！我没有看到任何css属性可以实现这一点。但是，也许它存在。您可以尝试以这种方式使用css和javascript。使用css

position:relative

和js设置顶部。虽然DCA.height（）+100虽然它需要一个额外的

.wrapper

，但是这种布局可以通过

显示：table和朋友：

html

更新
上面的内容将集中在顶部100px和底部之间，而不是视口顶部和底部之间（使用css实现这一点的一种黑客方法是，但ToniTornado的答案是一种可靠的解决方法）

@TCHdvlp的尝试很接近，但缺少了一些重要部分（缺少顶部空间，实际上没有完全居中）

TCHdvlp脚本的工作、编辑版本：

var height = $(document.body).height();
$(".dca").each(function(){
    if(($(this).height()+100) < height){
        $(this).css({top: '50%', marginTop: - $(this).height() / 2 });
    }
});

var height=$（document.body）.height（）；
$（“.dca”）。每个（函数（）{
如果（$（this）.height（）+100）


注意：您可能不仅要在页面加载时这样做，而且要在调整窗口大小时这样做。
不使用JS是可能的，但这肯定很难，而且可能需要使用大量CSS代码，这与旧版本不兼容（请确保您已使用

然后，使用
标记集中元素

上面标签中的任何元素都将集中并具有响应性。
我的解决方案考虑到您希望内容集中在整个页面上，而不仅仅是“在下面的空间”。我使用了负边距来实现这一点

请参见此处的工作示例：


HTML:

测试：


IE 9 Win7-->工作正常
Chrome 30 Mac-->工作正常
Safari 7 Mac-->工作正常
Firefox 25 Mac-->运行正常

更新：

我使用了
框大小：border-box；
，但是Firefox需要一个额外的
-moz-box大小：border-box；
。现在它也可以在Firefox中使用。
一个无表但基于javascript的解决方案（只是为了增加多样性）

HTML

Javascript

var content = document.getElementById('content');
var topMargin = (window.innerHeight - document.getElementById('topbar').offsetHeight - content.offsetHeight) / 2;
if (topMargin < 0) {
    topMargin = 0;
}
content.style.top = topMargin + 'px';

var content=document.getElementById（'content'）；
var topMargin=（window.innerHeight-document.getElementById（'topbar'）.OffsetSight-content.OffsetSight）/2；
如果（上边距<0）{
topMargin=0；
}
content.style.top=topMargin+'px'；

纯CSS，简化HTML
这是基于的，但所需的包装器要少得多


HTML

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

顶部区域下方可选垂直居中
，上面的css将
#内容
集中在屏幕空间的中心。如果您希望集中在顶部区域下方的左侧空间，则通过移除顶部空白来调整
主体
，并通过移除顶部填充来调整
#容器
，此css显示：

正文{
显示：表格；
填充顶部：100px；
}
#容器{
显示：表格单元格；
垂直对齐：中间对齐；
}
纯CSS，不使用表格

另一种方法是使用
align items
属性可以轻松地垂直对齐网格内容，当内容超出单元格时返回到正常对齐状态

例如：


函数删除段落（）{
const p=document.querySelector（'p'）
如果（p）
p、 parentNode.removeChild（p）
}
功能添加段落（）{
常量p=document.createElement（'p'）
p、 textContent=“培根同侧肉或坐在阿梅特鸡腿臀部猪肉馅牛肉丁t骨、磨碎的圆菲力牛排和法兰克福肉糕。”
document.querySelector（“#content”）.appendChild（p）
}
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#包装纸{
身高：100%；
显示：网格；
网格模板行：50px 1fr；
对齐项目：居中；
}
#空间{
高度：50px；
宽度：100%；
边框底部：2个红色虚线；
颜色：红色；
文本对齐：居中；
线高：50px；
}
#内容{
宽度：80%；
背景颜色：浅蓝色；
保证金：0自动；
}
p{
填充：10px；
保证金：0；
}

删除段落
添加段落
培根益普生肉馅多洛西特鸡腿臀猪肉馅意大利熏牛肉丁丁字骨，磨碎的圆菲力牛排和法兰克福肉馅面包。

有趣的问题！我没有看到任何css属性可以实现这一点。但是，也许它存在。您可以尝试以这种方式使用css和javascript。使用css
position:relative
和js设置
top
。而DCA.height（）+100有趣的是，我将尝试使用TCHdvlp。@4M01我确实尝试过使用
最大高度
，但我没有任何运气！是什么使内容区域高度增加？浏览器视口宽度？嗨，Alex.“内容区域”（蓝色）div高度随着内容的归档而增加。例如，字母。Hmmm，是否可以在不知道容器实际高度的情况下实现它？内容框内的高度会有所不同，因此
#容器
不必随之波动吗？或者您是否建议检测用户的屏幕高度并设置该高度作为
#container
高度？请记住，这发生在整个屏幕/窗口中。在我的示例中，container是一个div。我选择它作为容器。您可以选择窗口作为整个容器。正如您在我的示例中看到的，我没有执行我的计算lik
<div id="container">
    <div id="table">
        <div id="cell">
            <div id="content">Some content</div>
        </div>
    </div>
</div>

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

<div id="container">
    <div id="topbar">You can't touch me</div>
    <div id="content">Aliquam erat volutpat...</div>
</div>

div#topbar {
    border: 2px dashed red;
    height: 50px;
    text-align: center;
}
div#content {
    background: #90c0ff;
    width: 260px;
    margin: 0px auto;
    position: relative;
}

var content = document.getElementById('content');
var topMargin = (window.innerHeight - document.getElementById('topbar').offsetHeight - content.offsetHeight) / 2;
if (topMargin < 0) {
    topMargin = 0;
}
content.style.top = topMargin + 'px';

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