在IE7中居中绝对定位的div

Question

I have a relatively simple layout as seen in the simplified version of the code below:

<div id="protocol_index_body_wrapper">
    <div id="protocol_index_body">
    </div>
</div>

The CSS

#protocol_index_body_wrapper {
    background: url("/images/stripe.png") repeat scroll 0 0 transparent;
    position: absolute;
    top: 120px;
    left: 0px;
    right: 0px;
    bottom: 10px;
}
#protocol_index_body {
    width: 960px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

}

The absolute positioning is needed to make sure that both div's expand to the full height of the window. The expected behavior is seen in the image above and is present in IE8, Firefox, and Chrome. However, in IE7 the div which should be centered is flush against the left side. Any ideas how to fix this?

Answer 1

Have you tried specifically assigning an auto value to the margin-left and margin-right? This will force both margins to be equal and center the div provided your div is not at 100% width of the page.

{
    margin-left: auto;
    margin-right: auto;
}