Skip to content

Instantly share code, notes, and snippets.

@johnsardine
Forked from LeaVerou/dabblet.css
Created April 19, 2012 15:26
Show Gist options
  • Save johnsardine/2421680 to your computer and use it in GitHub Desktop.
Save johnsardine/2421680 to your computer and use it in GitHub Desktop.
Vertical centering with Flexbox + margin fallback
/**
* Vertical centering with Flexbox + margin fallback
* Lea Verou & David Storey
*/
html, body { height: 100%; }
body {
width: 100%; /* needed for FF */
margin: 0;
/* Flexbox hawtness */
display: box; display: flexbox;
box-align: center; flex-align: center;
box-pack: center; flex-pack: center;
}
div {
padding: 1em 1.5em;
/* Fallback to look decent w/out Flexbox */
max-width: 10em;
margin: 1em auto;
/* Make it pretty */
background: slategray;
text-align: center;
border-radius: .3em;
color: #405060;
font: bold 150% sans-serif;
text-shadow: 0 2px 1px hsla(0,0%,100%,.2);
}
<div>OMG, I’m centered!</div>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment