Skip to content

Instantly share code, notes, and snippets.

@incompl

incompl/index.html

Created October 25, 2012 00:07
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 incompl/3949732 to your computer and use it in GitHub Desktop.
Save incompl/3949732 to your computer and use it in GitHub Desktop.
Download ZIP
flexbox.incompl.com
Raw
index.html
<!doctype html>
<html>
<head>
<title>vertical centering 4 lyfe</title>
<link href='http://fonts.googleapis.com/css?family=Handlee' rel='stylesheet' type='text/css'>
<style>
html {
height: 100%;
}
body {
font-family: sans-serif;
color: #D4A9D2;
height: 100%;
margin: 0;
display: -webkit-flex;
display: flex;
background-color: black;
}
.centered {
margin: auto;
max-width: 380px;
}
h1 {
color: white;
font-family: Handlee, sans-serif;
font-size: 2em;
text-shadow: 1px 1px 0 Fuchsia;
}
a:link, a:visited, a:active {
color: #D9D9D9;
}
a:hover {
color: Fuchsia;
}
</style>
</head>
<body>
<div class="centered">
<h1>
flexbox makes it easy to do vertical centering in css!!!!
</h1>
<p>
only works in chrome now, <a href="http://css-tricks.com/old-flexbox-and-new-flexbox/">here's why</a>
</p>
<p>
<a href="http://www.w3.org/TR/css3-flexbox/">read the spec</a>
</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment