如何在div中垂直對齊h2元素？

Question

我在這里有這個codepen ，有人知道如何將h2垂直和水平對齊div元素的中心嗎？

html

<div class="container">
   <h2 class="center">
      Hello World!
   </h2>
</div>

CSS：

 .container {
position:relative !important;
height: 100%;
margin: 0 auto;
 display:table;
}

.center {
text-transform: uppercase;
text-align: center;
z-index: 200;
position: absolute;
  vertical-align:middle;
font-size: 4em;
margin: 0;
padding: 1em .75em 0 .75em;
line-height: .8;
text-shadow: 1px 1px 10px #666666;
  display:table-cell;
}

Answer 1

刪除positoin屬性，並為您的body和html應用100% 。

body,html{height:100%; padding:0; margin:0;} 
.container {    
height: 100%;
margin: 0 auto;
padding:0;
 display:table;
}

.center {
text-transform: uppercase;
text-align: center;
z-index: 200;    
vertical-align:middle;
font-size: 4em;
margin: 0;
padding:0;
text-shadow: 1px 1px 10px #666666;
display:table-cell;
}

演示

Answer 2

有一個更好的解決方案。 但是這里也是一個：

.container {
    height: 100%;
    border: solid thin #000;
}
body,html{
    height: 100%;
}
.center {
    border: solid thin #ddd;
    text-transform: uppercase;
    z-index: 200;
    position: absolute;
    display: inline-block;
    text-align:center;
    left: 25%;
    right: 25%;
    top: 25%;
    bottom:25%;
    font-size: 4em;
    line-height: .8;
    text-shadow: 1px 1px 10px #666666;
}

Answer 3

display:flex; 可能沒有設置CSS的提示： http : //codepen.io/anon/pen/mEufx

html,body {
  height:100%;
}
.container {
  min-height:100%;
  display:flex;
}

.center { 
  margin:auto;
  text-transform: uppercase;
  font-size: 4em;
  text-shadow: 1px 1px 10px #666666;
}