如何在div中垂直对齐h2元素？

I have this codepen here, anyone know how to vertically and horizontally align h2 to the centre of the div element?

我在这里有这个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;
}

3 个解决方案

#1

Remove positoin properties and apply 100% for your body and html.

删除positoin属性并为您的身体和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;
}

DEMO

#2

There is def a better solution. But here is also one:

有一个更好的解决方案。但这也是一个:

.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;
}

#3

display:flex; could be an hint with little CSS to set : http://codepen.io/anon/pen/mEufx

显示:弯曲;可能是一个小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;
}

#1