将文本垂直居中，高度为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

使用Flexbox。 http://jsfiddle.net/xpjkbhvm/

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

它是not supported by IE 8-9但是否则它是最可靠的方法。