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
Recent Work
June 10, 2010 at 9:14 am
This is genius. Totally fixed my dilemma! Thank you!
June 16, 2010 at 12:14 pm
This trick has really hepled me a lot dude! Thanks for your effort and keep it up =)
June 23, 2010 at 11:07 am
What the hell never even crossed my mind. This is great
July 2, 2010 at 5:00 am
Thanks, just used your idea to fix a issue with the css of http://www.pointstone.com
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%;
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
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%;
July 29, 2011 at 4:44 am
anybody know if this is cross-browser friendly? Using percentages in margin?
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.
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!
July 30, 2010 at 5:21 am
absolute horizontal centering:
margin: 0 auto;
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.
December 4, 2010 at 1:56 am
thank u bro… it's useful for me
December 24, 2010 at 7:33 am
simple and great. Thanks
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;
}
July 17, 2011 at 6:22 pm
Thank you very much Cagline, this was very helpful to me.
October 29, 2011 at 7:28 am
Me too man, that solved a nightmare for me thanks a bunch!!
February 1, 2012 at 12:54 pm
so much better than the solution up there *thumbs up*
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.
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.
February 28, 2012 at 9:37 am
Yes! This is the good way
Thanks for this topic
June 12, 2011 at 12:45 am
Thank you so much for the div centering material.
Oscar
June 22, 2011 at 11:52 am
stupid example this is css hack fucker!!!!
June 29, 2011 at 8:36 am
how to mainwrapper div align center in ie8?
July 16, 2011 at 2:41 pm
Thanks!!!
realy helped me!
September 16, 2011 at 11:14 am
This worked perfectly for my needs. Thanks a lot
September 28, 2011 at 4:11 pm
YAY!!!!!
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!
September 29, 2011 at 6:07 am
VERY helpful and clever! thanks so much!
November 17, 2011 at 9:28 am
Can’t believe I had never thought of this. Thank you very much
December 6, 2011 at 6:21 am
hokay
December 12, 2011 at 2:50 am
Nice solution and inspiring for me. Thank you.
December 13, 2011 at 12:02 pm
Can some people speak Dutch?
December 18, 2011 at 8:27 am
Thank you very much! this helped me alot
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.
January 3, 2012 at 1:25 pm
Thanks! This is a great trick!
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!
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
January 31, 2012 at 1:46 pm
Thanks a lot
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.
February 24, 2012 at 1:16 am
Thank you very much brothers!
this is very helpful to me too…
:*
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.
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.
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.
April 1, 2012 at 12:40 am
this will have a problem if the window is resized….
April 4, 2012 at 11:57 pm
Very helpful, thanks
April 10, 2012 at 12:33 pm
Great, thaks, and works for me in ie
April 19, 2012 at 3:43 am
its working really thanks man
April 27, 2012 at 3:36 pm
Muchisimas Gracias!!!!! many thanks!!!
May 5, 2012 at 10:59 pm
Thank you soo much that worked great
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;
}
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.
May 14, 2012 at 11:42 pm
killer! expertly done! for those of us making bombass mobile websites, this is a must! : )
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!!!!!!
June 8, 2012 at 7:18 am
Works great, thank you !
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.
August 10, 2012 at 1:05 pm
Simple, intuitive and elegant. Thank you.