Posted By

bryanlyman on 12/11/09


Tagged

div width ie crossbrowser browser safari auto Opera Firefox dynamic center internet all explorer height chrome horizontal vertical 100 cross any compatible justification bryan lyman


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

jillella


Cross-Browser Auto Vertical/Horizontal Centering (Chrome & Forms Compatible)


 / Published in: CSS
 

A way to do 100% DIVs that adjust to content and center themselves both vertically and horizontally automatically. Tested for all browsers at 1920X1080 resolution. The 96% body height fixes Firefox and IE scrollbars that appear without reason and might need to be adjusted for smaller or larger windows.

  1. <style type="text/css">
  2. html,body,form {height:100%;margin:0px;padding:0px;}
  3. html{height:100%;}
  4. body{height:96%;text-align:center;}/*height 96% fixes scrollbar problems*/
  5. /*remove text-align for left justification*/
  6. form{display:block;}/*chrome & forms*/
  7. #page{display:table;overflow:hidden;margin:0px auto;padding:0px;min-height:100%;}
  8.  
  9. *:first-child+html #page {position:relative;}/*ie7*/
  10. * html #page{position:relative;}/*ie6*/
  11.  
  12. #content_container{display:table-cell;vertical-align: middle;}
  13. *:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
  14. * html #content_container{position:absolute;top:50%;}/*ie6*/
  15.  
  16. *:first-child+html #content{position:relative;top:-50%;left:-50%;}/*ie7*/
  17. * html #content{position:relative;top:-50%;left:-50%;}/*ie6*/
  18.  
  19. #page{height:100%;width:100%;}
  20. </style>
  21.  
  22. <body>
  23. <div id="page">
  24. <div id="content_container">
  25. <div id="content">
  26.  
  27. <!-- centered content here -->
  28.  
  29. </div>
  30. </div>
  31. </div>
  32. </body>

Report this snippet  

You need to login to post a comment.