在 IE7 中将绝对定位的 div 居中答案

【问题标题】：Centering an absolute positioned div within IE7在 IE7 中将绝对定位的 div 居中
【发布时间】：2011-11-23 00:29:27
【问题描述】：

我有一个相对简单的布局，如下面的代码的简化版本所示：

<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;

}

需要绝对定位来确保两个 div 都展开到窗口的全高。预期的行为如上图所示，并且存在于 IE8、Firefox 和 Chrome 中。但是，在 IE7 中，应该居中的 div 与左侧齐平。任何想法如何解决这个问题？

【问题讨论】：

标签： html css internet-explorer layout internet-explorer-7

【解决方案1】：

您是否尝试过专门为 margin-left 和 margin-right 分配一个 auto 值？如果您的 div 不是页面的 100% 宽度，这将强制两个边距相等并将 div 居中。

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

【讨论】：

这和我上面的有什么不同吗？