Flexible Height Vertical Centering (IE8+)


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



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.