Center an Absolute Position DIV

So you have information in a div, and you have its position set to absolute, and you want to center it on your page. Seems impossible to do, but with a little thinking we can pull it off.

Let’s say this is the code we are using, and we want to center the “absolutecenter” div.


<div id="container">
<div id="absolutecenter">This is what I want to center</div>
</div>


The trick to it is to add a width to the #absolutecenter id. Once we establish a width for the container div, we can position the left side of the div 50% across our parent div (#container).


#absolutecenter {
position: absolute;
width: 100px;
top: 0;
left: 50%;
margin-left: -50px;
}

Now here is the trick. Take the width you assigned to #absolutecenter and divide it by 2. This number will be the number you use for the left margin, which will be a negative margin. The negative margin of -50px will move #absolutecenter to the middle of your container div. All done!