Skip to content

Instantly share code, notes, and snippets.

@DeviaVir
Created October 11, 2012 02:32
Show Gist options
  • Save DeviaVir/3869830 to your computer and use it in GitHub Desktop.
Save DeviaVir/3869830 to your computer and use it in GitHub Desktop.
Vertical centering with images and Firefox?
/**
* Vertical centering with images and Firefox?
*/
html, body { height: 100%; }
body {
width: 100%; /* needed for FF */
height: 100%;
margin: 0;
/* Flexbox hawtness */
display: box; display: flexbox;
box-align: center; flex-align: center;
box-pack: center; flex-pack: center;
}
img {
padding: 1em 1.5em;
/* Fallback to look decent w/out Flexbox */
max-width: 100em;
max-height:100em;
margin: 1em auto;
width: 80px; /* This changes the height!? */
height: 10080px; /* This changes nothing!? */
/* Make it pretty */
}
<img src="https://chase.sillevis.net/c.png" />
{"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