Centering Tests

dabblet.css

/*
	Centering Tests
*/

/* --- base styles --- */

.container {
	width: 500px;
	height: 500px;
	background: #b1b1b1;
	margin: 5em auto;
	padding: 0;
}

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

/* --- demo #1: full auto --- */

.demo-1 .container {
	position: relative;
}

.demo-1 .center {
	/* must set width + height in some way (px/%) */
	width: 50%;
	height: 50%;

	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

/* --- demo #2: table-cell --- */

.demo-2 .container {
	display: table;
}

.demo-2 .center {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	/* display: inline-block; -- IE7 fallback */
}

dabblet.html

<div id="page" class="demo-1">
	<div class="container">
		
		<div class="center">
			<img src="http://lorempixel.com/400/700/sports/" />
		</div>

	</div>
</div>

settings.json

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