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

Question

I have a div with a height of 100%, hence it takes all full window height, and obviously as you scroll down it scrolls to the next divs.

The problem is that text is stuck on top and I want it to be centered, until a user decides to scroll down.

Below is the html

<div id="header1">

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

  </div>

Below is the css:

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

Answer 1

Use Flexbox. http://jsfiddle.net/xpjkbhvm/

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

It's not supported by IE 8-9 but otherwise it's the most reliable method.

Answer 2

You can try the below code:

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

If you don't wanna use "display:table" you can use below code as well:

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