Dead Center an element with display: inline-block

dabblet.css

/**
 * Dead Center an element with display: inline-block
 */

html,
body { margin: 0; height: 100%; }

.container {
	letter-spacing: -0.31em;
	text-rendering: optimizespeed;
	text-align: center;
	height: 100%;
}

.container:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 5px;
	background-color: red;
	height: 100%;
}

.container > .content {
	box-sizing: border-box;
	display: inline-block;
    vertical-align: middle;
	letter-spacing: normal;
    text-rendering: auto;
    text-align: left;
}

/* useless fancyness */
body { background-color: #eee; }

h1 { 
	margin-top: 0; 
	font-size: 1.2em;
}

.container > .content {
	width: 100%;
	max-width: 440px;
	border: 1px solid #ccc;
	padding: 20px;
	border-radius: 4px;
	box-shadow: 0 1px 2px #ccc;
	background-color: #fff;
}

dabblet.html

<div class="container">
	<div class="content">
		<h1>Dead Center an element with display: inline-block</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a nisl ut lacus adipiscing fringilla ut eget orci.</p>
		<a href="http://twitter.com/giuseppgurgone">@giuseppegurgone</a>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}