Centering elements with position: absolute

dabblet.css

/* Centering elements with position: absolute */

.method1 {
	width: 	340px;
	height: 160px;

	background: gainsboro;
	text-align: center;

	position: absolute;

	top: 50%;
	left: 50%;
	
	margin-left: -170px;
	margin-top: -80px;
	
	line-height: 120px;
}

.method2 {
	width: 	320px;
	height: 140px;

	background: hotpink;
	text-align: center;

	position: absolute;

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

dabblet.html

<div class="method1">Method1</div>
<div class="method2">Method2</div>

dabblet.js

// alert('Hello world!');

settings.json

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