Skip to content

Instantly share code, notes, and snippets.

@ddprrt
Created April 17, 2012 07:06
Show Gist options
  • Save ddprrt/2404115 to your computer and use it in GitHub Desktop.
Save ddprrt/2404115 to your computer and use it in GitHub Desktop.
Flexbox Overlay
/**
* Flexbox Overlay
*/
body {
margin: 0;
}
#overlay {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
display: flexbox;
flex-align: center; flex-pack: center;
}
#overlay > div {
background: white;
padding: 20px;
}
<!-- content to be placed inside <body>…</body> -->
<div id="overlay">
<div>
<img src="http://craytoncomicblog.files.wordpress.com/2010/05/batman_symbol.jpg"/>
</div>
</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