Vertical centering with Flexbox + margin fallback

dabblet.css

/**
 * Vertical centering with Flexbox + margin fallback
 * Lea Verou & David Storey
 */


div {
	width: 56px; /* needed for FF */
	height: 56px;
	font-size: 30px;
	border: 1px solid black;
	
	/* Flexbox hawtness */
	display: box; display: flexbox;
	box-align: center; flex-align: center;
	box-pack: center; flex-pack: center;
	
	background-image: linear-gradient(top, rgba(20, 20, 20, 0.5) 0%, rgba(20, 20, 20, 0.5) 50%, rgba(90, 90, 90, 0.5) 50%, rgba(90, 90, 90, 0.5) 100%); 
}

dabblet.html

<div>×</div>

settings.json

{"view":"split-vertical","fontsize":"50","seethrough":"","prefixfree":"1","page":"css"}