05 Mar 08 _ Position a div element absolute and align it top center using CSS
By Katy
in BlogTorials
I recently ran across this positioning problem. I was setting up a site where I needed a div layer (nav element) to go inside a layer with 100% width. I needed to position the div absolute, top and also align it in the middle of the page (see Pasta Technology for demo). CSS doesn’t always behave like you expect it would. But in the event you were wondering how to align your div top and center, here is the solution.
Set your container element’s position as absolute with top as 0px, if necessary. Next give it a position of left: 50%. Give the div an appropriate width for its contents. Then set it up with a margin-left as the negative value of half of the width. See my example:
#headerInside {
position: absolute;
top: 0px;
left: 50%;/*some magic to align the element in the center;
width: 1000px;
margin-left: -500px;/* half of the width */
}
You can also use the same principle if you want to align the element in the middle of the page vertically, by using top: 50%.
September 1st, 2008 at 4:05 pm
it work!!!
September 19th, 2008 at 7:17 am
Thanks girlfriend.
For some reason Dreamweaver gets moody. I can do everything the same EXACT way in two different test documents and when I switch to design view one would be centered differently than the other. And like I said, same exact code throughout the entirety of the document.
I like your site, hopefully all is well.
Check out my url if you’re interested at http://www.zafada.com
I’ve been using alot of my time lately learning javaScript..
September 19th, 2008 at 10:36 am
Saves an unnecessary wrapper div, thanks for the info.
October 1st, 2008 at 11:13 am
Wow! Saved me much hassle because the Zen Garden CSS project does not allow new Divs to be created.
Thank you!
December 2nd, 2008 at 4:37 am
Works like a charm! Thanks!
January 8th, 2009 at 7:45 am
Simple and GREAT !
Thank you
February 17th, 2009 at 2:24 am
Thanks dear. It had helped me a lot when i searched.
February 19th, 2009 at 4:43 am
[...] I could get it to work in all major browsers except the dreaded IE. Well, I stumbled across this link and it saved me from having many more headaches or completely ditching the idea I had. The [...]
March 2nd, 2009 at 7:27 am
GREAT! It work! Thank you!
March 3rd, 2009 at 10:20 pm
Thank you!
March 12th, 2009 at 5:25 pm
Thanks for this. It helped me out in a pinch.
April 16th, 2009 at 11:06 pm
[...] Position a div element absolute and align it top center using CSS _ The Red Frog Blog _ AWP _ Web an… [...]
April 18th, 2009 at 10:55 pm
Works well except for when the browser size is much smaller than you would like (say 800×600). Then the left side of your containing div gets lost to the left of the browser and there’s no way to scroll over there and see it.
April 18th, 2009 at 11:26 pm
Here’s an alternative:
#container {
position:absolute;
top:0;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
width:960px;
}
By setting left and right to 0 it forces the edges of the container to find the edge of browser. Then margin auto forces the margin to find the width of the container, centering it.
This eliminates the left side hiding behind the browser window.
April 20th, 2009 at 12:20 am
It works for me in all major browers. I’m very greatful for your efforts. I’ve been trying to figure out how to make my flash design top and center for a few days now. I don’t know about older browsers though. I have IE 8 so if it doesn’t work with older browser I won’tknow until I launch the site and try on other computers.
April 28th, 2009 at 9:41 am
I just got this version to work…
It needed a separate line for IE (padding Vs. margin)
…silly browsers, CSS scripts are for kids.
April 30th, 2009 at 2:25 pm
I have tried for a half a day to get the menu I designed to center. It is a js script menu. Using your way finally got me the results I wanted. Thanks so much
May 19th, 2009 at 11:46 am
quick google search landed me here and saved me without getting a headache for an answer….thanks!
June 8th, 2009 at 12:05 pm
Sweet action. Thanks for the great tip.
June 21st, 2009 at 12:34 pm
Nick’s alternative with the margin-left & right to auto work great in Firefox… but I can’t get it to work in IE. Can someone help?
June 27th, 2009 at 11:14 pm
Thanks a lot to Nick Weynand who gives a solution to the problem side hiding!
You are a hero!
June 29th, 2009 at 6:29 am
I tried Nick Weynand’s way because i don’t know the dimensions of the divs (he specified a width but in my case I don’t, and it works). It worked great in FF but it won’t work on IE7. do anyone have a solution? thanks
July 14th, 2009 at 3:42 pm
Thanks nick. Your code works great!
July 16th, 2009 at 3:49 am
thank you, thank you, thank you!!
July 19th, 2009 at 8:09 pm
Thnks a lot just what I was looking for
August 12th, 2009 at 9:11 pm
… and…
… if u need to align divs inside div on bottom-top-left-or-right, check this out!
http://blog.davieschoots.nl/2009/04/27/align-one-div-in-another-div-on-bottom-top-left-or-right/
August 23rd, 2009 at 6:23 am
Я в твиттере я нашёл отдушину. Не подписываюсь на лытдыбровские блоги. а вот в твиттере с удовольствием всякого почитаю.
blog.awpny.com – супер!!!!
October 9th, 2009 at 9:36 pm
Very nice, this worked out great for us! Thanks for your help… keep up the great work…
February 1st, 2010 at 10:52 am
THANK YOU! Works a treat =]