Center Absolute Position DIV

,
  • Digg
  • Technorati
  • del.icio.us
  • Propeller
  • StumbleUpon
  • Reddit
  • Mixx
  • Fark
  • Slashdot
  • Sphinn
  • Design Float
  • description
  • BlinkList
  • E-mail this story to a friend!
October 1st, 2006 | Web Development How-to's | 79 Comments

Centering a div on the screen with absolute position is something may at first seem very complicated, but with a little thinking and simple addition to the position element you can easily center an absolute position div in the middle of the screen.

This can be helpful for creating a wrapper to contain and center the contents of your entire site on the page.

Lets say that you have a simple page like this:

<div id="xyz_main">
    <div id="xyz_header"> Header </div>
    <div id="xyz_body"> Body </div>

    <div id="xyz_footer"> Footer </div>
</div>

And you wish to center the ‘main’ div in the center of the page as an absolute position center div. You can do this by adding the following positional style attributes to the ‘main’ div:

#xyz_main {
    width: 140px;
    border: 1px solid #666666;
    text-align: left;
    position: absolute;
    top: 0px;
    left: 50%;
    margin-left: -70px;
}

By setting the left position to 50% it will set the div to start in the center of the screen. By adjusting the left margin by a value half of the size of the div we are centering, we can move the entire div to the left and place it directly in the center of the page.

Your page would now look something like this:


Header
Body content here…

That’s it! That is all you have to do to center an absolute position div on the page… Enjoy!







NOTE: I have added a new CSS Template Cheats section to the site. This new resource has even more compliant methods of centering DIVs.





Enjoy This Article?

Now is your chance to join our growing community! Be the first to know about great new articles like this one. Register for my Email Updates or RSS Feed today!

About the Author

Zach is a marketing consultant and owner of a FL web design and marketing group. He offers graphic design and marketing services, speaks on Internet marketing, and blogs about it all in his free time. (»)

Contact Zach: Company Website | Email

Related Posts


Using DIV and SPAN Elements as Clickable Links

HTML Code Bloat - How to eliminate HTML code bloat from your web pages

Creating a Scrolling DIV area

IE PNG - The PNG Transparency Problem in Windows Internet Explorer

Aero Glass Button


79 Comments

  1. Alex

    October 16, 2006 @ 8:28 pm

    Seems it doesn’t work in IE :(

    Reply

    Charlie

    Thanks!
    I was working on this problem, had found another way, but it didn’t work in IE. Your method works great all around!

    Reply

  2. zacheos

    October 22, 2006 @ 12:13 pm

    What version of IE are you seeing this problem in? If you let me know that I can find a solution. I know it works in most versions of IE.

    Reply

  3. Leandro

    January 27, 2007 @ 7:26 pm

    Great little work around. Works perfect.
    I’ve looked for a solution with out resorting to tables for a while. Thank you.

    Reply

  4. Zort

    February 15, 2007 @ 2:30 pm

    For me it works in IE6 but not Firefox 2. Firefox 2 seems to treat 50% as 50% of the body’s width.

    Reply

  5. Ricardo

    February 17, 2007 @ 11:38 pm

    I n g e n i o u s !!!

    Reply

  6. Hal

    February 27, 2007 @ 7:52 am

    Nice trick, i’ve tried figuring something out for a while, and this works perfectly. Thanx for the solution.

    Reply

  7. Bob

    April 8, 2007 @ 6:50 am

    doesn’t work if the exact width is not known, eg. if you try this with percentages in IE6 it will break. can be got around using expressions though

    Reply

  8. chikalin

    April 17, 2007 @ 9:13 am

    i have ie7 and firefox 2 and it works great. thanks!

    Reply

  9. Callum

    April 23, 2007 @ 3:01 am

    Great little tip, works a treat for me in Firefox 2.0.0.3 on Fedora Core 6. Cheers - Callum.

    Reply

  10. Deanna

    May 18, 2007 @ 8:03 am

    Thanks for this! You just saved me a lot of time. For others…I tested this on FF for Mac, Safari, FF for PC & IE 6 and is fine in all.

    Reply

  11. Jenn

    June 15, 2007 @ 6:27 pm

    THANK YOU SO MUCH!!!

    Reply

  12. RIPPER

    June 27, 2007 @ 1:53 pm

    im not an expert but im curious why use this solution over just using margin: 0 auto on a non absolute positioned div? Won’t it still center it?

    Reply

  13. Blair

    August 23, 2007 @ 3:10 am

    Thank you so much! This was my one sticking point with CSS positioning and now my designs are unlimited. Seems to be solid in all browsers I can test too :)

    Reply

  14. Joan

    September 7, 2007 @ 11:44 am

    This is the only solution i find in the web, but, what happens when you dont know the size of the div? i want to position a variable-width div in the center of the page. That’s not so simple, huh?

    Reply

  15. Neil

    October 21, 2007 @ 1:01 am

    How about using tag to bypass all these issues?

    Reply

  16. biffs

    November 14, 2007 @ 8:00 pm

    beautiful tip!

    Reply

  17. Don

    December 2, 2007 @ 10:20 am

    Much appreciation for this excellent tip!!! :)

    Reply

  18. Ross

    December 12, 2007 @ 7:24 pm

    Great solution EXCEPT…

    Minimize the window to smaller than the div and the left side gets eaten up (I assume because of the negative margin) and isn’t accessible through scrolling. Thoughts anyone? Sorry to be the rain on the parade. If I had a solution I’d share it. True for IE6, IE7 & Firefox 2.

    Reply

  19. Kris

    January 7, 2008 @ 10:09 am

    Awesome. Thanks.

    Reply

  20. Steve

    January 11, 2008 @ 5:47 pm

    Did not work. Moved the entire Div to the right of the center point. I can’t believe Div layers were designed with no consideration of centering them without some gimick!

    Reply

  21. Amy

    February 14, 2008 @ 9:04 am

    Thank you so much - I’d been having problems with some z-indexed divs in IE that had to be centered and positioned absolutely to work properly and you have solved my problem. Thanks for making my Friday!

    Reply

  22. Marcel

    February 19, 2008 @ 3:13 am

    Works fine in IE7 and FireFox.

    Thanks!

    Reply

  23. Grimm

    March 12, 2008 @ 9:33 am

    Hi,

    A bit late, but…

    Ross is right - minimizing the window eats left side. This could be fixed by

    #xyz_main {
    width: 140px;
    border: 1px solid #666666;
    text-align: left;
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    }

    Of course 140 is just an example - 900 works also :)
    Regards,

    Reply

  24. hilary

    April 4, 2008 @ 12:26 pm

    THANK YOU! So easy. Fix above works great!

    Reply

  25. MSc

    April 17, 2008 @ 10:24 am

    Awesome! Works perfectly and everything without knowing or having to find out screen resolutions.

    Thx a lot!
    MSc

    Reply

  26. Neal

    May 12, 2008 @ 1:29 pm

    ur a friggin genius. You just saved me about a million hours on category1games.com. I love u

    Reply

  27. Vitaly

    May 19, 2008 @ 8:11 am

    It is realy does not work in IE 6. Too bad :(

    Reply

  28. Mark

    May 22, 2008 @ 8:52 am

    I spent hours trying to figure out how to do this until I stumbled across your site.

    THANK YOU SO MUCH!!!! :)

    Reply

  29. agallers

    June 8, 2008 @ 2:35 pm

    Great for FF, can’t get it to work in IE6

    Reply

  30. Jack

    June 14, 2008 @ 4:20 am

    Look…. this just DOES NOT work! It works in FF3 but not in IE 6. I am so tired of this css crap. I have spent hours reading at least 10 different tutorials on this and most them say “We did it!” Damn do they ever test their stuff in IE?
    Going back to tables for good. CSS was a nice idea, but unfortunately totally useless in real life.

    Reply

    Studiostein

    Thanks a million for sharing this method. You saved me.

    Jack, hang in there with the CSS. Eventually it will click, and you’ll never look back.

    Reply

  31. no_matter

    June 15, 2008 @ 7:22 am

    ok, this i know, but, how do i positionate a DIV that have a height less than screen height, on the middle of vertical align?

    Reply

  32. zacheos

    June 17, 2008 @ 12:28 pm

    To center a DIV vertically, you can actually use the exact same method. Just set the “top” position to 50% and add a “margin-top” of -Xpx (where X equals one half of the DIV height).

    I see many people saying this does not work in IE6. I just tested this now myself. I had no problem getting a very simple test HTML page to center in IE6 using this method.

    Can someone with this trouble please elaborate on your issues?

    Reply

  33. MoDaD

    June 29, 2008 @ 3:26 pm

    Just tried it and it seems to be working in IE 6, IE 7, Firefox 3 and Safari 3.1.1 just fine. It also validates too. Thanks!

    If any of you are having problems with it just double-check that you make the margin-left negative and HALF of the container’s width.

    Reply

    zacheos

    You are correct MoDaD… This trick does work in almost every browser out there. I think that some of the people having trouble may also have been using improper DOCTYPE and sending IE6 into quirks mode. I have written a little post on this issue over here.

    Reply

  34. HT

    July 4, 2008 @ 10:00 pm

    nice one m8 :)

    Reply

  35. Lars

    July 23, 2008 @ 8:48 am

    Hello Zacheos and MoDad,

    It is true that centering an absolute div on a page is not that hard using the above techniques. But what if you want to center (vertically) the div at a page that is very long. If you click at a link soemwhere at the bottom of the page it will open the div centeren on the page, but because it is extremely long, you won’t see it immediately and have to scroll to it.

    At (http://)florida.greatestdivesites.com/divesites/list_of_all_movies’ we have a list of movies. If you try to click one of the lowest movies you see what I mean. Do you know a way to center it on the page where you currently are.

    Lars

    Reply

    zacheos

    Halo Lars,

    Mein Deutsch ist nicht so gut. Aber, ich verstehe ein wenig.

    I took a quick look at your site and because you have many of your comments in German, and much of the markup is obfuscated, it was difficult to find the problem.

    Perhaps you could post the location of the code, or the actual code, you are currently using to position the AJAX pop ups?

    Reply

  36. jc

    August 24, 2008 @ 11:54 pm

    Doesnt work in IE7

    CSS is a disaster. It shouldnt take hours of blog post searching to find some f*$%ing code to center a div.

    Reply

    zacheos

    jc -

    This trick does work in IE7, but you have to make sure you are using the proper DOCTYPE or else IE will go into quirks mode. Read more about quirks mode and proper DOCTYPE here.

    ALSO - Be sure to check out my collection of CSS template cheats. I have several starter templates there that use a centered DIV without using the above trick.

    Reply

  37. Magical John

    September 23, 2008 @ 4:58 pm

    Thank you so much! no one else has any clue about this! It saved me having to redesign my site with tables!
    Thanks 700 billion!

    Reply

    zacheos

    Nice site… Glad I could help!

    PS: Love the 700 Billion reference ;)

    Reply

  38. Charles Wedemeyer

    November 6, 2008 @ 6:50 am

    THANK YOU, THANK YOU, THANK YOU …. I have spent days trying to figure this out!!!! I hate Dreamweaver!!! (I am actually still learning it and still learning div’s) I am a table guy

    Reply

    zacheos

    Hang in there… Once you make the switch to div- and css-based layouts, you will not look back.

    Reply

  39. Jane doe

    November 12, 2008 @ 5:12 pm

    this works except when the window size is reduce. It causes everything to the left side to practically disappear… i tried what “grimm” suggested but it did not work and apparently there is still people using weird sizes under 600px… now why? i don’t know and i don’t care but i still need a solution… this was an almost solution probably the closest one.

    Reply

    zacheos

    Depending on your needs, you may have some luck working from one of my CSS template cheats: http://www.zachgraeve.com/css-cheats/ They are not centered with absolute position, but you may find this solution works better for your needs.

    Reply

  40. Jamie Larsen

    November 22, 2008 @ 4:56 pm

    This is great, but I am not sure why it is really needed. If you have your whole webpage container set to a specific width, say 980px and you use margin: 0 auto, this will center your site.

    If you want to add a floating div within this site, you need to have your absolute position within a relative position. Than you can float it to any specific area that you would like within that site.

    This works in all major browsers.

    The only reason I really see a need for this is if you want your div moving with the scroll. This can be pretty annoying for users.

    Reply

    zacheos

    Mostly true… However, IE does not recognize margin:auto when in Quirks Mode. Read on for more info on Quirks Mode and DOCTYPE usage.

    Reply

  41. brandi

    November 26, 2008 @ 11:14 am

    Thanks for this workaround! I was making myself nuts trying to do this and your workaround is perfect!

    Reply

  42. ktsixit

    December 19, 2008 @ 2:15 am

    thats a great trick!!! thank you!

    Reply

  43. Abby

    January 2, 2009 @ 11:43 am

    I don’t know if I’m missing something, but when I set the left to 50% it makes the page NOT centered. The screen will move all the way over to the right side of the screen. Whats going on?

    Reply

    zacheos

    You must make sure you also set the margin-left to half the size of the DIV and make it a negative number: (i.e.: margin-left: -70px;)

    Reply

    Abby

    Thanks, that did the trick!

    Reply

  44. David Clark

    January 3, 2009 @ 7:45 am

    You may want to change the word Abosulte for Absolute!

    Reply

    zacheos

    Very nice… After all this time and this many comments you are the first to notice the obvious typo! Thanks for letting me know.

    Reply

  45. Scott

    January 21, 2009 @ 8:04 am

    Awesome thanks man!

    Reply

  46. Chris

    February 4, 2009 @ 11:07 pm

    Thanks, this really helped me out.

    Reply

  47. Linda

    March 16, 2009 @ 11:17 pm

    Thank you so much for posting this no matter how old it is!

    Reply

  48. mike

    March 19, 2009 @ 11:45 am

    Works in FF 3.07 not in IE 7…
    In iE7 it breaks the page, div will not display

    Reply

    zacheos

    It does work… But you have make sure you are using the proper DOCTYPE. If you are not using the correct type, IE goes into quirks mode and this will break the page.

    Reply

    Mike

    Yes I read that, let me double check…

    Reply

  49. QA

    March 26, 2009 @ 11:34 pm

    Weird… one of my divs will center and the other one is slightly off-center! I can’t figure out why. (Tested in several browsers and getting the problem consistently)

    Here’s my markup:

    #globalNav {
    background-image: url(images/dm-nav-bar.png);
    background-repeat: no-repeat;
    padding: 0px;
    height: 159px;
    width: 1000px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    position: absolute;
    top: -24px;
    overflow: hidden;
    z-index: 2;
    left: 50%; /* For centering */
    margin-left: -500px; /* For centering */
    }

    #content {
    position: absolute;
    background-color: #6f8489;
    background-repeat: repeat;
    padding: 12px;
    width: 936px;
    border: 1px solid #000000;
    top: 0px;
    overflow: auto;
    z-index: 1;
    left: 50%; /* For centering */
    margin-left: -468px; /* For centering */
    }

    So does anyone know why the #globalNav div centers and the #content div is off? Because I am stumped.

    I would use the “auto” method for centering except that since the positioning is absolute I can’t. I am about ready to say screw the CSS and bust out the tag!

    Reply

    zacheos

    Without seeing the page in question I am going to make some guesses here. I think you are missing a major point. This centering hack should be used, as you have done, to center your main wrapper div. However, once the wrapper is centered and placed where you want it, you should use natural positioning within it. In other words, you don’t need to use absolute positioning for the content div. It is already contained within the main wrap.

    Reply

    ds00424

    I am guessing that #content is off by 6 pixels. And this is because you have padding of 12px. But you are only setting the margin to half the width — not half the (width+pad)

    Reply

  50. QA

    March 27, 2009 @ 11:21 am

    Hey zacheos,
    Thanks for the reply.

    I figured out that my centering issues were a result of having padding on my second div. If you are going to pad the left or right of the div you need to correct for this by further decreasing the margin value.

    So in your example that would mean where it says margin-left: -70px; if you wanted to have a padding of 10px on each side of the div you would need to subtract 10 more from that so that it becomes -80px.

    If anyone is encountering this problem, I hope that helps.

    Reply

    zacheos

    That makes some sense… I typically do not pad container level objects for that exact reason. Be sure you are checking your work in IE, FireFox and Chrome. IE handles that box padding differently than the others. Not sure how advanced you are, but take a look at my CSS cheats: http://www.zachgraeve.com/css-cheats/

    If you view the code for any of these samples, you will see how I hack the CSS to display block level elements with padding the same way in all browsers.

    Good luck with your designs…

    Reply

  51. Lakmal

    April 15, 2009 @ 3:22 am

    Thanks a lot..
    I could also center align an absolutely positioned Div element. :-) It worked in FF 3.0.8 and in IE 7

    Reply

  52. Allan

    April 15, 2009 @ 7:38 pm

    Thank. You.
    This has been killing me for a while since I was using the auto margin left and right method. Does not work in IE 7 with absolute.

    Reply

  53. alon

    April 19, 2009 @ 1:22 am

    thanks !!
    working good.

    Reply

  54. CSS - transparent Backgrounds - UK Graphic Design Forums | UK Website Design Forums

    April 23, 2009 @ 8:45 am

    [...] to absolute and use a negative margin, half the width of the div you want to float, like so Center Absolute Position DIV | marketing . web . design __________________ — Pete Morley, Graphic Designer. View my portfolio - Add me on [...]

  55. Chris

    April 23, 2009 @ 11:11 pm

    Thanks a lot! Works nicely, and very simple.

    Reply

  56. Catzie

    April 29, 2009 @ 8:00 am

    This is a BRILLIANT idea I never thought of. Thank you very much! It helps a lot. :D :D

    Catzie’s last blog post… Some changes…

    Reply

  57. matt

    April 29, 2009 @ 6:53 pm

    You rock!

    Reply

  58. chris

    May 4, 2009 @ 8:01 am

    Brilliant!! This is exactly what I was looking for! So glad you posted this.

    Reply

  59. FusionIT.com.my

    May 18, 2009 @ 10:50 pm

    Thank you very much for this information, it is extremely beneficial and cross browser compatible. We do look forward reading more of your posts.

    Reply

  60. Gregg Blanchard

    May 21, 2009 @ 12:08 pm

    Brilliant! Works like a charm…been looking for a fix on this for a while!

    Gregg Blanchard’s last blog post… I’m Stumped: Can You Help?

    Reply

  61. Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

    May 21, 2009 @ 6:14 pm

    [...] Center Absolute Position DIV | marketing . web . design Great help when trying to center absolutely positioned divs with css (tags: css reference web positioning) [...]

  62. warren

    June 4, 2009 @ 5:20 am

    Did this and it F$%^&ED UP EVERYTHING THAT WAS NESTED INSIDE MY “CONTENT”!!! Now my content is about 100-200px off to the left of my large div depending on screen resolution

    Reply

RSS feed Comments | TrackBack URI

Write Comment