Center with calc(), tip from Lea Verou presentation

dabblet.css

/**
 * Center with calc(), tip from Lea Verou presentation
 */
body{
	/* housekeeping */
	background: #ffa;
	min-height: 100%;
	font-family:sans-serif;
}

section{
	background:#0f0;
	width:60%;
	margin:0 calc(50% - 30%);
}

dabblet.html

<!-- tip from http://lea.verou.me/more-css-secrets -->
<section>
	<p>Centered inside</p>
</section>

settings.json

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

Great tip.

I also add margin: 0 auto as a fallback if calc is not supported. The background does not spread on the whole page, but at least the content is centered :)

I’ve just stumbled across this looking for Lea’s talk. calc() only makes sense when you have mixed value types like % and px. As you are only using percentages in your example you don’t need calc. Just do the math:

margin:0 calc(50% - 30%); => margin:0 20%;

Here's Lea's slides: http://lea.verou.me/more-css-secrets/#padding-auto

This is what she really does:
section {
width: 700px;
padding: 0 calc(50% - 350px);
}