Centering Test

dabblet.css

/*
	Centering Test
	Full Auto
*/


/* Not Required */
.container {
	margin: 5em auto;
}

.hide {
	display: none;
}


/* Full Auto Technique Styles */
#demo-1.container {
	position: relative;
	width: 500px;
 	height: 500px;
	padding: 0;
	background: #B1B1B1;
}

#demo-1 .center {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

#demo-1 .center.img {	
	/* scale large images, not necessary if you know the largest dimension of the image will be smaller than the container */
	max-width: 85%;
	max-height: 85%;
}

#demo-1 .center.block {
	width: 50%;
	height: 50%;
	background: steelblue;
}

dabblet.html

<div id="demo-1" class="container">

	<img class="center img" src="http://lorempixel.com/400/700/sports/" />
	<div class="center block hide">Paragraph</div>
	
</div>

settings.json

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