Center Abosulte Position DIV
development, 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:
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.
Related Posts
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]
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]
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]
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]
February 17, 2007 @ 11:38 pm
I n g e n i o u s !!!
[Reply]
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]
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]
April 17, 2007 @ 9:13 am
i have ie7 and firefox 2 and it works great. thanks!
[Reply]
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]
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]
June 15, 2007 @ 6:27 pm
THANK YOU SO MUCH!!!
[Reply]
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]
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]
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]
October 21, 2007 @ 1:01 am
How about using tag to bypass all these issues?
[Reply]
November 14, 2007 @ 8:00 pm
beautiful tip!
[Reply]
December 2, 2007 @ 10:20 am
Much appreciation for this excellent tip!!!
[Reply]
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]
January 7, 2008 @ 10:09 am
Awesome. Thanks.
[Reply]
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]
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]
February 19, 2008 @ 3:13 am
Works fine in IE7 and FireFox.
Thanks!
[Reply]
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]
April 4, 2008 @ 12:26 pm
THANK YOU! So easy. Fix above works great!
[Reply]
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]
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]
May 19, 2008 @ 8:11 am
It is realy does not work in IE 6. Too bad
[Reply]
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]
June 8, 2008 @ 2:35 pm
Great for FF, can’t get it to work in IE6
[Reply]
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]
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]
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]
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]
July 4, 2008 @ 10:00 pm
nice one m8
[Reply]
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]
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]
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]
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]
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]