Vertical center content with CSS

index.html

<div class="container-outer">
  	<div class="container-middle"> 
		<div class="container-inner"> 
			<p>Hello World!</p>
		</div> 
	</div> 
</div>

style.css

.container-outer {
  width: 100%;
  padding: 0;
  display: table;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}
.container-middle {
  padding: 0;
  vertical-align: middle;
  display: table-cell;
  margin: 0;
}
.container-inner {
  width: 700px;
  margin: 0 auto;
  text-align: left;
  padding: 10px;
}