html - 如何在 IE7 中将绝对定位的 div 居中？

Question

更新了布局的上下文

我的页面结构相对简单。该页面由两个绝对定位的 div 组成。一个以另一个为中心。

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

里面有对应的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;

}

预期的行为如上图所示。此行为存在于 IE8、Firefox 和 Chrome 中。但是，在 IE7 中，应该居中的 div 与左侧齐平。有什么想法吗？

Answer 1

试试这个:

#protocol_index_body {
    width: 50px;
    margin: 0 auto 0 -25px;
    position: absolute;
    top: 0;
    left: 50%;
    right: 0;
    bottom: 0;
    background-color: red;
}

或者……

#protocol_index_body {
    width: 50px;
    margin: 0 auto 0 50%;
    position: absolute;
    top: 0;
    left: -25px;
    right: 0;
    bottom: 0;
    background-color: red;
}