Skip to content

Instantly share code, notes, and snippets.

@tristen

tristen/index.html

Created December 8, 2016 15:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tristen/650c6bd6dfe55d5d272dc251b8c2387f to your computer and use it in GitHub Desktop.
Save tristen/650c6bd6dfe55d5d272dc251b8c2387f to your computer and use it in GitHub Desktop.
Download ZIP
Vertically aligned items in Flexbox
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
body { margin:0; padding:0; background-color:#eee; }
.bg-grey { background-color:#ccc; }
.align {
display: flex;
align-items: center;
min-height: 100vh;
justify-content: center;
}
.align-item {
flex: 1;
}
</style>
</head>
<body>
<div class='align'>
<div class='align-item bg-grey'>I am aligned</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment