contenu centré et fluide

dabblet.css

/* contenu centré et fluide */
html, body {margin:0;padding:0;border-collapse:collapse;height:100%;width:100%;background: linear-gradient(45deg, #33f, #00f,#f90);}
html {display:table;}
body {display:table-cell;vertical-align:middle;text-align:center;}


#main
{
	max-width: 555px;
	display:inline-block;
	border: solid;
	border-radius: 11px;
	border-color: #c7c3c4;
	color:black;
	background-color:white;
	background:url(images/fond.png) no-repeat center, 
	radial-gradient(rgba(255,125,0,0.5) 60%, transparent, rgba(0,125,255,0.5)) -50% 25%, 
	linear-gradient(90deg,rgba(100,255,100,0.5),transparent,rgba(100,255,100,0.5),transparent,rgba(100,255,100,0.5),transparent) ;
	background-size: 100% 100%, 33% 33%, 98% ;
	padding:5px;
}

dabblet.html

<div id="main">
	<h1>Modifiez</h1> 
	<p>largeur,<br/> hauteur,<br/> contenu.
	</p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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