Grow your CSS skills. Land your dream job.

Last updated on:

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

Comments

  1. Permalink to comment#

    hai yo man its working

  2. Permalink to comment#

    Very good script. Congrats!

  3. notmmao
    Permalink to comment#

    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
    Permalink to comment#

    great….

  5. Tommy
    Permalink to comment#

    very useful fool!

  6. Haywood
    Permalink to comment#

    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
    Permalink to comment#

    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?

    • Same question, but i guess it is just for the sake of organizing the code. but i would really like to know if there was a specific reason for doing it that way.

  10. Permalink to comment#

    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
    Permalink to comment#

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

  12. Daniele
    Permalink to comment#

    great! thanks!

  13. Permalink to comment#

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

  14. Permalink to comment#

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

  15. Vlad
    Permalink to comment#

    I have no idea what this code does or what any of it means. Not very useful to me.

  16. Shina
    Permalink to comment#

    Thanks .. easy and simple

  17. Nic
    Permalink to comment#

    Thanks Chris, incredible CSS!

  18. You didn’t really use a “*” selector to reset those margins and paddings, did you? Yes, you did.

    That’s not exactly what I would call “a smart idea” if you’re planning to put content in between those tags one day. After all “*” means “everything”.

    Geez, and that from someone I thought would be smarter than spreading something like that to the general public of noobs and geeks. Tsss…

    Yes, I’m a cynic and a critic today! ;)

  19. hgh
    Permalink to comment#

    its not working

  20. GFX
    Permalink to comment#

    It’s not working in IE 9

  21. Permalink to comment#

    Hey man you are requested to checkout the code once more..Its not working.

  22. LuizCB
    Permalink to comment#

    CSS: copy/past and apply source formating(or leave it as is…)

    html,body{height:100%}*{margin:0;padding:0}#content{border:1px solid #666;padding:10px}#content_container{display:table-cell;padding:10px;vertical-align:middle}#page{display:table;height:100%;margin:0 auto;overflow:hidden;width:465px}:first-child+html #page,* html #page{position:relative}:first-child+html #content_container,* html #content_container{position:absolute;top:50%}:first-child+html #content,* html #content{position:relative;top:-50%}

    HTML:

    use the one provided on top of this article

    __ – __

    An element centered horizontally and vertically without JavaScript!Pure CSS technique allows an element with dynamic height, horizontal and vertical justify center.tested with: Win: ie6, ie7, ie8, Chrome 2, Firefox 2Mac: Safari 3, Safari 4 (beta), Firefox 3, Opera 9Unresolved Problem:IE6 and IE7 – something with scrollbar if the content is larger than the browser window….Source: Some nice peopleQuick translated by some nice guy who, as the author of this place, likes to help.. to be helped – by nice people.

    __ – __

  23. LuizCB
    Permalink to comment#

    Correcting the format of last paragraph:
    An element centered horizontally and vertically without JavaScript!
    Pure CSS technique allows an element with dynamic height, horizontal and vertical justify center.
    Tested with: Win – ie6, ie7, ie8, Chrome 2, Firefox 2; Mac – Safari 3, Safari 4 (beta), Firefox 3, Opera 9.
    Unresolved Problem: IE6 and IE7 – something with scrollbar if the content is larger than the browser window….
    Source: Some nice people http://www.flashjunior.ch/school/test/divcentering/index.cfm .
    Quick translated by some nice guy who, as the author of this place, likes to help.. to be helped – by nice people.

  24. Sathish
    Permalink to comment#

    Works Great! But with width 100% for the page div does not works, that is what i am looking for.

  25. Ankit
    Permalink to comment#

    Hey.!! its not working on IE-6. if we increase our content, no vertical scroll is coming.

  26. Suklambar
    Permalink to comment#

    Hii friend correct it, it’s not working

  27. Permalink to comment#

    Saved me some time reworking a site that has CSS classes in place to position stuff based on the content which was creating a maintenance nightmare.

    Thanks Chris.

  28. Permalink to comment#

    Saved me some time reworking a site that has CSS classes in place to position stuff based on the content which was creating a maintenance nightmare.

    Thanks Chris.

    (You can remove my first comment, and this line during your moderation if you’d like. I accidentally made my url HTTPS, which it is not, so the link wasn’t working.)

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".