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


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

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.


Copy this code and paste it in your HTML
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.