将文本垂直居中,高度为100%

时间:2015-04-12 18:21:08

标签: javascript jquery html css html5

我有一个高度为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%;
}

1 个答案:

答案 0 :(得分: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但是否则它是最可靠的方法。