Center Absolute Position DIV

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…

Footer

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

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

Alex

October 16, 2006 @ 8:28 pm

Seems it doesn’t work in IE

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!

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.

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.

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.

Ricardo

February 17, 2007 @ 11:38 pm

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

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.

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

chikalin

April 17, 2007 @ 9:13 am

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

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.

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.

Jenn

June 15, 2007 @ 6:27 pm

THANK YOU SO MUCH!!!

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?

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

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?

Neil

October 21, 2007 @ 1:01 am

How about using tag to bypass all these issues?

biffs

November 14, 2007 @ 8:00 pm

beautiful tip!

Don

December 2, 2007 @ 10:20 am

Much appreciation for this excellent tip!!!

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.

Kris

January 7, 2008 @ 10:09 am

Awesome. Thanks.

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!

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!

Marcel

February 19, 2008 @ 3:13 am

Works fine in IE7 and FireFox.

Thanks!

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,

hilary

April 4, 2008 @ 12:26 pm

THANK YOU! So easy. Fix above works great!

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

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

Vitaly

May 19, 2008 @ 8:11 am

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

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

agallers

June 8, 2008 @ 2:35 pm

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

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.

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.

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?

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?

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.

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.

July 4, 2008 @ 10:00 pm

nice one m8

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

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?

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.

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.

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!

zacheos

Nice site… Glad I could help!

PS: Love the 700 Billion reference

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

zacheos

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

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.

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.

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.

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.

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!

ktsixit

December 19, 2008 @ 2:15 am

thats a great trick!!! thank you!

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?

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

Abby

Thanks, that did the trick!

David Clark

January 3, 2009 @ 7:45 am

You may want to change the word Abosulte for Absolute!

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.

Scott

January 21, 2009 @ 8:04 am

Awesome thanks man!

Chris

February 4, 2009 @ 11:07 pm

Thanks, this really helped me out.

Linda

March 16, 2009 @ 11:17 pm

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

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

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.

Mike

Yes I read that, let me double check…

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!

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.

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)

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.

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…

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

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.

alon

April 19, 2009 @ 1:22 am

thanks !!
working good.

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 [...]

Chris

April 23, 2009 @ 11:11 pm

Thanks a lot! Works nicely, and very simple.

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

Catzie’s last blog post… Some changes…

matt

April 29, 2009 @ 6:53 pm

You rock!

chris

May 4, 2009 @ 8:01 am

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

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.

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?

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

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

RSS feed Comments | TrackBack URI

Center Absolute Position DIV

Enjoy This Article?

About the Author

Related Posts

79 Comments

Write Comment

Archives