Posted By

adamcbrewer on 03/11/11


Tagged

css align centering middle


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

adamcbrewer


Flexible Height Vertical Centering (IE8+)


 / Published in: CSS
 

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

  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. }

Report this snippet  

You need to login to post a comment.