Code Snippet

Home » Code Snippets » CSS » Center DIV with Dynamic Height

Center DIV with Dynamic Height

CSS:

* { margin: 0; padding: 0; }
#page{display:table;overflow:hidden;margin:0px auto;}
*:first-child+html #page {position:relative;}/*ie7*/
* html #page{position:relative;}/*ie6*/

#content_container{display:table-cell;vertical-align: middle;}
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
* html #content_container{position:absolute;top:50%;}/*ie6*/

*:first-child+html #content{position:relative;top:-50%;}/*ie7*/
* html #content{position:relative;top:-50%;}/*ie6*/

html,body{height:100%;}
#page{height:100%;width:465px;}

HTML:

<div id="page">
       <div id="content_container">
               <div id="content">
                     <p>your content</p>
               </div>
       </div>
</div>

Reference URL

Subscribe to The Thread

  1. hai yo man its working

  2. Very good script. Congrats!

  3. notmmao

    Because the twitter is blocked in China.
    So this lines of code used a very long time to load.
    http://platform.twitter.com/widgets.js
    Can optimize external javascript as load dynamic?

  4. federico

    great….

  5. Tommy

    very useful fool!

    • Basheer Shamary

      you mean tool, right??

  6. Haywood

    FAIL. You can’t even copy the stuff from the page to try it.

  7. Good stuff. …And I like the new site logo and fonts. ;)

  8. So great !! It works IE7, IE8, FF 3.5

    Thanks.

  9. Brian

    Forgive my ignorance, but why does the css have two identical id selectors? The 2nd line has #page{…} and the last line has it again (though affecting different things).

    Why not combine them? Or is it for some reason I don’t understand?

  10. This works wonderfully, thanks for sharing. I still get sick to my stomach when I have to consider IE hacks, but such is life.

    @Brian, I tried combining the CSS for the 2 #page selectors and saw no change in rendering in Firefox. I surmise there’s a very selective reason why it’s been separated out (perhaps some sort of forethought to using it in a grander design?), however for this basic example, it seems to not matter.

    – Jesse

    PS, at the time of posting this, my portfolio site is quite raw; judge not, please.

  11. David

    Works just great. Much appreciated for this css trick and all the other snippets on offer…

  12. Daniele

    great! thanks!

  13. yeah! man………. it’z working :D thank u so much bro :D

  14. Worked first time on an existing site, very pleased!! wanted to know how to do this forever.

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~