Skip to content

Instantly share code, notes, and snippets.

@ffoodd
Last active August 29, 2015 14:20
Show Gist options
  • Save ffoodd/05fe5d42d5fae336c2e5 to your computer and use it in GitHub Desktop.
Save ffoodd/05fe5d42d5fae336c2e5 to your computer and use it in GitHub Desktop.
Fixed and centered flex block
/**
* Fixed and centered flex block
*/
main {
background: lightgray;
display: flex;
flex: 1;
flex-flow: row nowrap;
justify-content: space-around;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
height: 100vh;
width: 100vw;
}
main div {
background: darkgray;
display: flex;
flex: 0 1 50vw;
align-self: center;
height: 50vh;
width: 50vw;
padding: 1em;
}
<!-- content to be placed inside <body>…</body> -->
<main>
<div>Essai</div>
</main>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment