Center an Absolutely-Positioned Item

This is an absolutely-positioned layer.

So how is it done? Simply position the element 50% from the left, and apply a negative margin half the width of your box (don't forget to take into account padding and borders; note also the problems with the box model experienced by earlier versions of Internet Explorer).

In this case, here is the CSS for this box:

#layer {
background: #FF6600;
position: absolute;
left: 50%;
width: 478px;
padding: 5px;
margin-left: -245px;
border: 1px solid #fc0;
color: #fff;
}

Tested in the following Windows browsers: IE 6, 5.5, 5.01, Firefox 1.5.0.1, Opera 8.51.

Back to tutorials index.