Noscope

Horisontal CSS Centering for Absolute Positioning

April 6th, 2005 by Joen code, css

In my daily work, I needed to center a div horisontally. Usually this is easy. Not so when using absolute positioned elements.

Basically, absolute positioning allows you to type in coordinates for your div, coordinates from the top-left of the screen.

I found the following solution to work fairly well, and I’m posting it here in case someone else might gain from it, as well as a reminder to myself.

Give then Take

If you need to center your absolutely positioned #content div, wrap it in a new #content-container div and apply the following CSS.

#content-container {
	width: 500px;
	position: absolute;
	left: 50%;
}
#content {
	position: absolute;
	left: -250px;
}

This will move the #content-container div’s left side to the exact center. After that, the #content div will be moved half the width of the #content-container div’s width to the left, thereby centering it.

It works reasonably well in both Mozilla and IE, as long as the browser is larger than the centered content.

Update: Doesn’t work as well as I initally thought. If scale the browser to be smaller than the the width of the #content-container, it’ll bork. Suggestions are welcome.

Update: AkaXakA’s method is better. Read it in the comments.

Feel free to post your solutions in the comments.