Advanced Search

Center DIV with Dynamic Height | CSS-Tricks

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. * { margin: 0; padding: 0; }
  2. #page{display:table;overflow:hidden;margin:0px auto;}
  3. *:first-child+html #page {position:relative;}/*ie7*/
  4. * html #page{position:relative;}/*ie6*/
  5.  
  6. #content_container{display:table-cell;vertical-align: middle;}
  7. *:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
  8. * html #content_container{position:absolute;top:50%;}/*ie6*/
  9.  
  10. *:first-child+html #content{position:relative;top:-50%;}/*ie7*/
  11. * html #content{position:relative;top:-50%;}/*ie6*/
  12.  
  13. html,body{height:100%;}
  14. #page{height:100%;width:465px;}
  15.  
  16. <div id="page">
  17.        <div id="content_container">
  18.                <div id="content">
  19.                      <p>your content</p>
  20.                </div>
  21.        </div>
  22. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.