pure css vertical/horizontal aligner

dabblet.css

#my_div{
	background:#aaa; 
	width:500px;
	height:400px;
	resize:both;
	overflow:auto;
}
#my_div>div{
	background:#444;
	color:#eee;
	width:300px;
	height:250px;
	resize:both;
	overflow:auto;
	padding:0 10px;
}
p{
	text-align:justify;
	font:13px/1.3 arial;
}

/*
 * pure css vertical/horizontal aligner
 */
.aligner{
	text-align:center;      /*left | center | right */
	white-space:nowrap;
}
.aligner:after,
.aligner>*{
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:middle;   /* top | middle | bottom */
}
.aligner:after{
	content:'';
	height:100%;
	width:0;
	visibility:hidden;
	
}
.aligner>*{
	text-align:left;
	white-space:normal;
}

dabblet.html

<div id="my_div" class="aligner">
	<div>
		<h3>Resize Me !</h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae elit sit amet turpis vulputate mattis vitae sed metus.</p>
		<p>Praesent mollis vestibulum mi vitae ornare. Sed lorem augue, elementum quis egestas eu, fermentum vel mauris.</p>
		<p>Fusce odio felis, porta eu placerat dignissim, tincidunt vel dui.</p>
	</div>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}