javascript - 垂直居中内容区域直到达到一定高度？

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，精简 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 3

纯 CSS，不使用 Table

解决此问题的另一种方法是使用CSS Grids。该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 4

Although it requires an additional .wrapper, this layout is doable with display: table; and friends:

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/

UPDATE

The above will center content between the top 100px and the bottom as opposed to between the viewport top and bottom (a hacky way to do this with css is http://jsfiddle.net/gLECE/6/ but ToniTornado's answer is a solid workaround)

@TCHdvlp's attempt is close, but missing some essential parts (missing top space, and actually not quite centering).

Working, edited version of TCHdvlp's script:

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/

Note: you probably want to do this not only on page load, but also when the window is resized.

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

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

概念如下：

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

如果你愿意，我可以在一个 jsfiddle 中为你做这个。

Answer 7

有趣的问题！我没有看到任何可以实现此目的的 CSS 属性。但是，也许它存在。您可以尝试以这种方式使用 css 和 javascript。使用 cssposition:relative和 js 设置顶部。当 DCA.height()+100 <= container.height 时，将 DCA 顶部设置为 (container.height - DCA.height)。否则，top 为 0，因此 DCA 将附加到top容器的 ，假设容器从“内容无法通过此高度”行开始。让我试试 jsfiddle 并编辑我的帖子。

这里是 ：

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

Answer 8

确保您已通过使用启用 html5 声明<!DOCTYPE html>

此后，使用<center style="width:100%;"></center>标签来集中您的元素。

上面标签中的任何元素都将集中和响应。