以 100% 的高度垂直居中文本

Question

我有一个高度为 100% 的 div，因此它占用了所有完整的窗口高度，很明显，当您向下滚动时，它会滚动到下一个 div。

问题是文本卡在顶部，我希望它居中，直到用户决定向下滚动。

下面是html

<div id="header1">

      <h1>Welcome to test</h1>
      <p></p>

  </div>

下面是css：

#header1 {
  width:100%;
  background: #6C7E82;
  top: 50%;
  min-height: 100%;
}

Answer 1

使用弹性盒。 http://jsfiddle.net/xpjkbhvm/

#header1 {
  width:100%;
  min-height: 100%;
  display: box; // IE10 fallback
  display: flex;
  align-items: center;
  justify-content: center;
}

IE 8-9 不支持它，但它是最可靠的方法。

Answer 2

你可以试试下面的代码：

#header1 {
  width:100%;
  background: #6C7E82;
  height: 100%;
  overflow:hidden;   
  display:table;
}
#header1 h1{
  display: table-cell;  
  vertical-align: middle; 
}

如果您不想使用“display:table”，您也可以使用以下代码：

#header1:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; 
}
#header1 {
  width:100%;
  background: #6C7E82;
}
#header1 h1{
  display: inline-block;
  vertical-align: middle;
}