Image always centered vertically and horizontally

dabblet.css

/**
 * Image always centered vertically and horizontally
 */

div#main {
	border: 2px solid #aaa;
	display: table;
	width: 100%;
	height: 300px;
}

div#main > div {
	display: table-cell;
	vertical-align: middle;
}

div > img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

dabblet.html

<div id="main">
	<div>
		<img src="http://placekitten.com/600/260" alt="Kitty 200x200 ;)" />
	</div>
</div>

settings.json

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