Vertical CSS3 centering with inline-block

markup

<div class="block">
	<div class="centered">Hello world</div>
</div>

styles

/* This parent can be any width and height */
.block {
	position:absolute;
	bottom:0;
	top:0;
	left:0;
	right:0;
	text-align:center;
  	background:red;
  	overflow-y:scroll;
}
 
/* The ghost, nudged to maintain perfect centering */
.block:before {
	text-align:center;
  	content: '';
  	display: inline-block;
  	height: 100%;
  	vertical-align: middle;
  	margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
	background:white;
  	display: inline-block;
  	vertical-align: middle;
  	width: 300px;
  	min-height:400px;
}