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.)

  29. Joanand
    Permalink to comment#

    Thank you, I am using a modified version of this to get my content centered. It works very well on FF. I got rid of over 10 lines of Javascript code.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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