DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Chara has posted 51 posts at DZone. View Full User Profile

Center Website Content with CSS

08.19.2013
| 3224 views |
  • submit to reddit
<style type="text/css">
/* 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>

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.