Skip to content

Instantly share code, notes, and snippets.

@clintfisher
Forked from ZeeAgency/dabblet.css
Created March 20, 2014 19:22
Show Gist options
  • Save clintfisher/9671775 to your computer and use it in GitHub Desktop.
Save clintfisher/9671775 to your computer and use it in GitHub Desktop.
/**
* Vertical centering with inline-block + generated-content
* Julien Cabanès
* based on http://css-tricks.com/centering-in-the-unknown/
*/
html, body { height: 100%; }
body {
display: inline-block;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
}
body:before {
display: inline-block;
content: '';
height: 100%;
vertical-align: middle;
}
div {
display: inline-block;
vertical-align: middle;
padding: 1em 1.5em;
/* Fallback to look decent w/out Flexbox */
max-width: 10em;
/* 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