vertical and horizontal centering

dabblet.css

/* vertical and horizontal centering

method 1: absolute position + negative margin

h1 {
position: absolute;
width: 350px;
height: 50px;
left: 50%;
top: 50%;
margin-left: -175px;
margin-top: -25px;
}*/

 /*method 2: flexbox*/

h1{
	display: flex;
	flex-flow:row nowr
	ap;
	justify-content: center;
	align-items: center;
	height: 200px;
}

dabblet.html

<div class="container"><h1>欢迎来学习HTML/CSS</h1></div>

dabblet.js

// alert('Hello world!');

settings.json

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