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. User Avatar
    pramod
    Permalink to comment#

    hai yo man its working

  2. User Avatar
    Gabriel
    Permalink to comment#

    Very good script. Congrats!

  3. User Avatar
    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. User Avatar
    federico
    Permalink to comment#

    great….

  5. User Avatar
    Tommy
    Permalink to comment#

    very useful fool!

  6. User Avatar
    Haywood
    Permalink to comment#

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

  7. User Avatar
    Azhar Kamar
    Permalink to comment#

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

  8. User Avatar
    svincoll4
    Permalink to comment#

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

    Thanks.

  9. User Avatar
    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?

    • User Avatar
      Rafael
      Permalink to comment#

      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. User Avatar
    Jesse
    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. User Avatar
    David
    Permalink to comment#

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

  12. User Avatar
    Daniele
    Permalink to comment#

    great! thanks!

  13. User Avatar
    JD
    Permalink to comment#

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

  14. User Avatar
    Ben
    Permalink to comment#

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

  15. User Avatar
    Vlad
    Permalink to comment#

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

  16. User Avatar
    Shina
    Permalink to comment#

    Thanks .. easy and simple

  17. User Avatar
    Nic
    Permalink to comment#

    Thanks Chris, incredible CSS!

  18. User Avatar
    Mike Edward Moras (e-sushi™)
    Permalink to comment#

    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! ;)

    • User Avatar
      Chris Coyier
      Permalink to comment#

      I’m a big fan of that reset. It’s simple, it’s easy, it covers a lot of ground.

  19. User Avatar
    hgh
    Permalink to comment#

    its not working

  20. User Avatar
    GFX
    Permalink to comment#

    It’s not working in IE 9

    • User Avatar
      Giovanni Mattucci
      Permalink to comment#

      What are you talking about? It works just fine in IE9. You might have some over zealous IE9 Security settings.

  21. User Avatar
    Techbymak
    Permalink to comment#

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

  22. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Ankit
    Permalink to comment#

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

  26. User Avatar
    Suklambar
    Permalink to comment#

    Hii friend correct it, it’s not working

  27. User Avatar
    Maynard
    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. User Avatar
    Maynard
    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. User Avatar
    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.

  30. User Avatar
    Akorn
    Permalink to comment#

    I have found sourcing the client’s viewport’s height to be a cleaner option.

  31. User Avatar
    10basetom
    Permalink to comment#

    Here’s a solution that doesn’t use IE hacks: https://css-tricks.com/centering-in-the-unknown/

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag