Center Absolute Position DIV

Home » Resources » Center Absolute Position DIV
posted in Resources
by

Center Absolute Position DIV

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.





181 Comments On This Topic
  1. Amber posted
    June 10, 2010 at 9:14 am

    This is genius. Totally fixed my dilemma! Thank you!

  2. Enes posted
    June 16, 2010 at 12:14 pm

    This trick has really hepled me a lot dude! Thanks for your effort and keep it up =)

  3. arnold posted
    June 23, 2010 at 11:07 am

    What the hell never even crossed my mind. This is great

  4. pointstone posted
    July 2, 2010 at 5:00 am

    Thanks, just used your idea to fix a issue with the css of http://www.pointstone.com

  5. hermes kelly bag posted
    July 8, 2010 at 11:09 pm

    Kinda surprised that no one has pointed this out yet (or maybe I missed it) – Do all of you really do your layouts in pixels and never want to vertically align something?

    It’s a nice solution for people who do *fixed-pixel* layouts, but folks who do elastic layouts (based on percentages, which is often preferred for presentation on a variety of screen resolutions) this does NOT work WITH HEIGHTS. It does still work with percentages and widths, but from all my testing, the results are very unexpected when using something like:

    height: 90%;

    top: 50%

    margin-top: -45%;

    • Kjlj posted
      July 29, 2011 at 4:45 am

      I think percentages are preferred because then it doesn’t matter what resolution the user’s screen is

  6. Brian posted
    July 14, 2010 at 1:05 pm

    This worked for me and I don't have to know the sizes of anything:

    left: 50%;
    margin-left: -25%;

    • Asd posted
      July 29, 2011 at 4:44 am

      anybody know if this is cross-browser friendly? Using percentages in margin?

  7. mike storer posted
    July 16, 2010 at 9:40 am

    Can someone please sum up everything above this comment for us dummies?

    I mean, write out an entire version that works with all browsers and allows for any chosen amount of blank space above the top and below the bottom of the page?

    I don't like to have my pages start at the exact top of the browser window. I think they look cleaner if, say, 100px of body background-image or background-color is visible at the top as well as at the page's bottom.

  8. Eric posted
    July 27, 2010 at 3:30 pm

    I love you! No need to keep pulling my hair out. I am using a carousel behind the site and need to have the images clickable all around. This was the answer I needed!

    Thanks!

  9. matej posted
    July 30, 2010 at 5:21 am

    absolute horizontal centering:

    margin: 0 auto;

  10. EYla.ela posted
    October 10, 2010 at 5:25 am

    hey super thanks with this!! i was freaking out here, thinking how to center my div. coz every time i open my created web page in different comp with diff. size of monitor, it rumbles. thanks!! :) chao.

  11. owmonths posted
    December 4, 2010 at 1:56 am

    thank u bro… it's useful for me

  12. gai posted
    December 24, 2010 at 7:33 am

    simple and great. Thanks

  13. Cagline posted
    June 4, 2011 at 9:16 pm

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

    • Wes Cook posted
      July 17, 2011 at 6:22 pm

      Thank you very much Cagline, this was very helpful to me.

    • David Jardine posted
      October 29, 2011 at 7:28 am

      Me too man, that solved a nightmare for me thanks a bunch!!

    • Ronverbal732 posted
      February 1, 2012 at 12:54 pm

      so much better than the solution up there *thumbs up*

      • Dorkasaurus posted
        February 28, 2012 at 2:38 am

        The solution up there was posted in 2006. Times change. Things get better. Give the author credit for using a solution that was acceptable at the time.

        • Eric Warnke posted
          June 20, 2012 at 2:14 pm

          The original solution is still required for certain cenarios. For example, an alert message that has a dynamic width and that you want to stay at the top of the screen. Then you have to use the above method and use some JavaScript to nudge the margin back to half the div width.

    • Eddy Martignier posted
      February 28, 2012 at 9:37 am

      Yes! This is the good way :) Thanks for this topic

  14. Oscardominguez posted
    June 12, 2011 at 12:45 am

    Thank you so much for the div centering material.
    Oscar

  15. Salmanlp posted
    June 22, 2011 at 11:52 am

    stupid example this is css hack fucker!!!!

  16. Sunilgandle posted
    June 29, 2011 at 8:36 am

    how to mainwrapper div align center in ie8?

  17. Yehonatan posted
    July 16, 2011 at 2:41 pm

    Thanks!!!

     realy helped me!

  18. Øyvind Knobloch-Bråthen posted
    September 16, 2011 at 11:14 am

    This worked perfectly for my needs. Thanks a lot :)

  19. No posted
    September 28, 2011 at 4:11 pm

    YAY!!!!!

  20. Estrangementx2 posted
    September 29, 2011 at 12:04 am

    Absolute Genius. This is one of those simple things that once you think about it, it’s a slap in the face!

  21. PumpkinPatch posted
    September 29, 2011 at 6:07 am

    VERY helpful and clever! thanks so much!

  22. Joe Harvey posted
    November 17, 2011 at 9:28 am

    Can’t believe I had never thought of this. Thank you very much :-)

  23. Xfdxfdfdfdfdf posted
    December 6, 2011 at 6:21 am

    hokay

  24. Joseareland posted
    December 12, 2011 at 2:50 am

    Nice solution and inspiring for me. Thank you.

  25. Jantje posted
    December 13, 2011 at 12:02 pm

    Can some people speak Dutch?

  26. Peter Griffin posted
    December 18, 2011 at 8:27 am

    Thank you very much! this helped me alot :D

  27. Jessica posted
    December 18, 2011 at 7:50 pm

    You are my hero! I was trying to get a div height to be the full height of the browser screen, but the background image wasn’t filling the screen completely to the bottom in Firefox. This fixed it for me.

  28. Gregor Gresak posted
    January 3, 2012 at 1:25 pm

    Thanks! This is a great trick!

  29. Daniel Milstein posted
    January 27, 2012 at 10:32 pm

    Good Share.I hope more people discover your blog because you really know what you’re talking about.  Can’t wait to read more from you!

  30. Greatful Reader posted
    January 31, 2012 at 3:38 am

    Thank you, great idea. Just saved me as my JS version had an annoying jump while it was calculating position

  31. Ndznkj posted
    January 31, 2012 at 1:46 pm

    Thanks a lot

  32. Derrick-bouchard posted
    February 13, 2012 at 5:50 pm

    Dude!  That was absolutely brilliant!  Works like a charm.  This will work to center any object or container that supports position commands, not just divs.  beautiful.

  33. Aglothe posted
    February 24, 2012 at 1:16 am

    Thank you very much brothers!
    this is very helpful to me too…
    :*

  34. Abhisek Pattnaik posted
    March 11, 2012 at 3:03 am

    Why to give a negative value to margin-left property?
    What’s the concept behind it? Please specify some ref. too.

  35. Husain (upFront Ideas) posted
    March 20, 2012 at 7:14 am

    Here is a fix for IE, everyone!

    #box {
      width: 950px; /* the width */
      margin-left: auto ;
      margin-right: auto ;
      position: absolute;
          left: 50%;
        margin-left: -475px; /* half of the width */
      height: 500px; top:325px; z-index: 9999 
    }

    /* this is what makes it compatible with IE */
    #box {margin-left: -51%}

    Enjoy :)
    http://www.upfrontideas.net – professional website design services.

    • Husain (upFront Ideas) posted
      March 20, 2012 at 7:16 am

       Here is a fix for IE, everyone! (UPDATED)

      #box {
        width: 950px; /* the width */
        margin-left: auto ;
        margin-right: auto ;
        position: absolute;
            left: 50%;
          margin-left: -475px; /* half of the width */
        height: 500px; top:325px; z-index: 9999  
      }

      /* this is what makes it compatible with IE */
      #box {margin-left: -51%}

      Enjoy :)
      http://www.upfrontideas.net – professional website design services.

  36. Arvind_avenger posted
    April 1, 2012 at 12:40 am

    this will have a problem if the window is resized….

  37. Sam posted
    April 4, 2012 at 11:57 pm

    Very helpful, thanks

  38. Unclebranca posted
    April 10, 2012 at 12:33 pm

    Great, thaks, and works for me in ie

  39. Rami Hamdan posted
    April 19, 2012 at 3:43 am

    its working really thanks man

  40. Arv_bua_incoria posted
    April 27, 2012 at 3:36 pm

    Muchisimas Gracias!!!!! many thanks!!!

  41. Ryan posted
    May 5, 2012 at 10:59 pm

    Thank you soo much that worked great

  42. Jahan Zeb posted
    May 9, 2012 at 5:24 am

    Only Use in your CSS class to center align your div or divs

    wrapper or any div name
    {
        margin: 0 auto;
    }

    • Good Glen posted
      July 1, 2012 at 6:11 pm

      “margin: 0 auto;” doesn’t work for absolute-positioned elements. The solution presented here is also what I came up with, but it has a weakness: If the browser is resized below 140px (or more realistically, something like 960px), the left side of the element will move off the left side of the page – AND the horizontal scrollbar won’t let you scroll left to see it.

      Faizan Atiq’s suggestion to use a full-width wrapper with margin:auto inside of it looks like it should work correctly, but it would be nice if there’s a way to do it without the extra markup.

  43. Yes posted
    May 14, 2012 at 11:42 pm

    killer! expertly done! for those of us making bombass mobile websites, this is a must! : )

  44. Faizan Atiq posted
    May 15, 2012 at 12:05 am

    The most easiest Way that i found was to place a div give it a 100% width and then define a div inside and play with it 
    e.g

           

    i guess it would work; it worked for ME!!!!!!

  45. Deacon Frost posted
    June 8, 2012 at 7:18 am

    Works great, thank you !

  46. Rae Pemberton posted
    July 11, 2012 at 5:11 am

    I have not found this to be out of date. Works in HTML 5 across Firefox, IE, Safari, Chrome.
    Love it.

  47. Vanlalhriata posted
    August 10, 2012 at 1:05 pm

    Simple, intuitive and elegant. Thank you.