Advanced Search

Flexible Height Vertical Centering (IE8+)

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /**
  2.  * IE7 and older - content will start at the top of the viewport.
  3.  *
  4.  *
  5.  * The HTML markup
  6.  *
  7. <body>
  8.     <div id="body">
  9.         Content goes here
  10.     </div>
  11. </body>
  12.  
  13. */
  14.  
  15.  
  16.  
  17. /**
  18.  * The CSS markup 
  19.  */
  20.  
  21. html,
  22. body {
  23.     width:100%;
  24.     height:100%;
  25. }
  26. html {display:table;}
  27. body {
  28.     display:table-cell;
  29.     vertical-align:middle;
  30. }
  31. #body {
  32.     max-width:50em;
  33.     margin:0 auto;
  34. }

URL: http://www.456bereastreet.com/archive/201103/flexible_height_vertical_centering_with_css_beyond_ie7/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.