Advanced Search

Center Website Content with CSS

/ Published in: CSS
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style type="text/css">
  2. /* Center your website horizontally */
  3. .wrapper{
  4.    width:960px;
  5.    display:table;
  6.    margin:auto;
  7. }
  8.  
  9. /* Center certain content vertically */
  10. .container{
  11.    min-height: 10em;
  12.    display: table-cell;
  13.    vertical-align: middle;
  14. }
  15. </style>
  16.  
  17. <div class="wrapper">
  18.     <div class="container">
  19.         <p>Content goes here</p>
  20.     </div>
  21. </div>

URL: http://www.apphp.com/index.php?snippet=css-center-site-content

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.