Skip to content

Instantly share code, notes, and snippets.

@apphp-snippets
Created August 12, 2013 08:31
Show Gist options
  • Save apphp-snippets/6209087 to your computer and use it in GitHub Desktop.
Save apphp-snippets/6209087 to your computer and use it in GitHub Desktop.
Today in the days of high-resolution widescreen displays, it's annoying to visit websites that are formatted like it's 1990's. aligned all the way to the left. Make sure your website doesn't suffer the same fate by forcing it;s content to center horizontally and vertically.
<style type="text/css">
/* source: http://www.apphp.com/index.php?snippet=css-center-site-content */
/* Center your website horizontally */
.wrapper{
width:960px;
display:table;
margin:auto;
}
/* Center certain content vertically */
.container{
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
</style>
<div class="wrapper">
<div class="container">
<p>Content goes here</p>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment