将内容区域垂直居中直至达到一定高度？

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 中运行。

Answer 2

纯CSS，不使用Table

解决此问题的另一种方法是使用 CSS 网格。

align-items

属性允许您轻松垂直对齐网格内容，当内容超出单元格时恢复正常对齐。

一个例子：

function removeParagraph() {
  
  const p = document.querySelector('p')
  
  if (p)
    p.parentNode.removeChild(p)
    
}

function addParagraph () {

  const p = document.createElement('p')
  
  p.textContent = 'Bacon ipsum dolor sit amet drumstick rump swine capicola pastrami boudin t-bone, ground round filet mignon andouille frankfurter meatloaf.'
  
  document.querySelector('#content').appendChild(p)

}

html, body {
    
  height: 100%;
  
  margin: 0;
  padding: 0;
    
}

#wrapper {
  
  height: 100%;
  
  display: grid;
    
  grid-template-rows: 50px 1fr;
    
  align-items: center;
  
}

#space {
  
  height: 50px;
  width: 100%;
  
  border-bottom: 2px dashed red;
  
  color: red;
  
  text-align: center;
  
  line-height: 50px;
  
}

#content {
  
  width: 80%;
  
  background-color: lightblue;
  
  margin: 0 auto;

}

p {
  
  padding: 10px;
  margin: 0;

}

<section id="wrapper">
  <div id="space">
     <button onclick="removeParagraph()">remove paragraph</button>
     <button onclick="addParagraph()">add paragraph</button>
  </div>
  <div id="content">
    <p>Bacon ipsum dolor sit amet drumstick rump swine capicola pastrami boudin t-bone, ground round filet mignon andouille frankfurter meatloaf.
    </p>
  </div>
</section>

在上面的示例中，我使用 Javascript 来允许您添加/删除段落，以便您可以看到内容增长的影响。这仍然是一个纯 CSS 解决方案。

根据您的受众，对 CSS 网格的支持非常好。

Answer 3

纯CSS，精简HTML

这是基于 ToniTornado 的答案，但所需的包装器要少得多。

查看小提琴演示

HTML

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

CSS（垂直定位的最小值）

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: table;
    padding-top: 100px;
    margin-top: -100px;
}

#container {
    display: table-cell;
    vertical-align: middle;
    padding-top: 100px;
}

顶部区域下方可选垂直居中

如上面的小提琴所示，上面的CSS将

#content

置于屏幕空间的中心。 如果您喜欢将顶部区域下方的空间居中，则通过删除负上边距来调整

body

，并通过删除其顶部填充来调整

#container

，就像这个小提琴和这个CSS 显示：

body {
    display: table;
    padding-top: 100px;
}

#container {
    display: table-cell;
    vertical-align: middle;
}

Answer 4

虽然需要额外的

.wrapper

，但这种布局对于

display: table;

和朋友来说是可行的：

html

<div class="container">
    <div class="top">some space</div>
    <div class="wrapper">
        <div class="content">
            <div style="height: [any height]">centered content</div>
        </div>
    </div>
</div>

CSS

.container {
    display: table;
    width: 100%;
    height: 100%;
}
.top {
    height: 100px;
    display: table-row;
}
.wrapper {
    /* this will take up remaining height (or stretch to content) */
    display: table-row;
}
.content {
    /* because this is displayed as a table cell, the vertical align centers
     * its content (instead of how it usually works on inline elements) */
    display: table-cell;
    vertical-align: middle;
}

http://jsfiddle.net/gLECE/3/

更新

上面的内容将在 顶部 100px 和底部 之间居中，而不是在 视口顶部和底部 之间（使用 CSS 实现此目的的一种黑客方法是 http://jsfiddle.net/gLECE/6/但 ToniTornado 的答案是一个可靠的解决方法）

@TCHdvlp 的尝试很接近，但缺少一些重要部分（缺少顶部空间，实际上不太居中）。

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

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

http://jsfiddle.net/gLECE/6/

注意：您可能不仅希望在页面加载时执行此操作，还希望在调整窗口大小时执行此操作。

Answer 5

一个无表但基于 javascript 的解决方案（只是为了增加多样性）

HTML

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

CSS

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

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

http://jsfiddle.net/SD7SA/

Answer 6

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

position:relative

和js设置顶部。当容器的 DCA.height()+100 <= container.height, set DCA top at (container.height - DCA.height). Otherwise, top is 0, so the DCA will be attached to the

top

时，假设容器从“内容无法通过此高度”行开始。让我尝试使用 jsfiddle 并编辑我的帖子。

这里是：

http://jsfiddle.net/TCHdevlp/gLECE/

Answer 7

没有 JS 是可以的，但是肯定会很难，而且可能需要使用大量 CSS 代码，这与旧版本不兼容（<9) IE versions.

概念如下：

1. 将外部 div 水平放置并垂直居中（它是 很难，如果你的身体高度不固定）
给他一个最大高度：100%
在此 div 中创建一个与顶部垂直对齐的内部 div。

如果你愿意，我可以用 jsfiddle 为你做这个。

Answer 8

https://playcode.io/1650918

您可以使用 flex 来实现这一点。

使用 min-height 属性制作垫片，以保持柔性包装器居中。由于使用了 margin:auto，一旦内容太大，flex 包装器将不会通过顶部 spacer，而 min-height 将防止该 spacer 收缩。

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.space {
  min-height: 100px;
  background-color: rgba(0, 0, 0, 0.158);
}

.content-container {
  height: 100%;
  display: flex;
}

.content {
  margin: auto;
  background-color: cyan;
  height: 500px;
  width: 500px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="src/style.css" />
</head>

<body>
  <div class="space"></div>
  <div class="content-container">
    <div class="content">
      <p>CONTENT</p>
    </div>
  </div>
  <div class="space"></div>
</body>

</html>

Answer 9

确保您已使用

<!DOCTYPE html>

启用 html5 声明

此后，使用

<center style="width:100%;"></center>

 标签来集中您的元素。

上述标签内的任何元素都将是集中且响应式的。