horizontal centering

dabblet.css

/* horizontal centering

method 1; negative margin

h1 {
width: 350px;
position: relative;
left: 50%;
margin-left: -175px;
}*/


/* method2: text align

h1 {
text-align: center;
}*/


/* method 3: margin: 0 auto;

h1 {
width: 350px;
margin: 0 auto;
}*/

/*method 4: flexbox*/

.container {
display: flex;
}
h1 {
margin: auto;
}

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":"css"}