CSS，将绝对 <div> 居中在 100% 宽度 <div> 内

Question

这应该不难...我有一个菜单和一些内容包裹在一个居中的液体 div 中。内容是绝对定位的。我想做的只是中心#content-container。我在这里错过了什么？

    #wrapper {
        max-width:100%;
        min-width:600px;
        min-height:100%;
        margin:0 auto;
    }

    #header {
     -moz-background-clip:border;
     -moz-background-origin:padding;
     -moz-background-size:auto auto;
     background-attachment:scroll;
     background-color:transparent;
     background-image:url(images/KMIAFS_banner.jpg);
     background-position:center top;
     background-repeat:no-repeat;
     height:150px;
    }

    #menu {
     margin-top:150px;
     clear:left;
     float:left;
     padding:0;
     border-top:6px solid #336699;
     width:100%;
     overflow:hidden;
    }

    #menu ul {
     float:left;
     margin:0;
     padding:0;
     list-style:none;
     position:relative;
     left:50%;
     text-align:center;
    }

    #menu ul li {
     display:block;
     float:left;
     list-style:none;
     margin:0;
     padding:0;
     position:relative;
     right:50%;
    }

    #menu ul li a {
     display:block;
     float:left;
     margin:0 1px 0 0;
     padding:30px 10px 6px 10px;
     background:#336699;
     text-decoration:none;
     color:#fff;
    }

    #menu ul li a:hover {
     padding:35px 10px 6px 10px;
    }

    #menu ul li.active a, #menu ul li.active a:hover {
     padding:40px 10px 6px 10px;
    }

    #content-container {
     top:225px;
     position:absolute;
     margin:0 auto;
     width:1000px;
     background-color:#fff;
    }

    #content {
     clear:left;
     float:left;
     width:610px;
     padding:20px 0;
     margin:0 0 0 30px;
     display:inline;
    }

    #content h2 {
     margin:0;
    }

    #aside {
     float:right;
     width:290px;
     padding:20px 0;
     margin:0 20px 0 0;
     display:inline;
    }

    #aside h3 {
     margin:0;
    }


<div id="wrapper">
<div id="header">
 <a id="box-link" href="index.html"></a>
    <div id="menu">
       <ul>
          <li><a href="" title="Link01">Link01</a></li>
          <li><a href="" title="Link02">Link02</a></li>
          <li><a href="" title="Link03">Link03</a></li>
          <li><a href="" title="Link04">Link04</a></li>
          <li><a href="" title="Link05">Link05</a></li>
          <li><a href="" title="Link06">Link06</a></li>
          <li><a href="" title="Link07">Link07</a></li>
          <li><a href="" title="Link08">Link08</a></li>
       </ul>        
    </div>
  <div id="content-container">
  <div id="content">
   <h2>
    Page heading
   </h2>
   <p>
    Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
   </p>
   <p>
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
   </p>
   <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
   </p>
  </div>
  <div id="aside">
   <h3>
    Aside heading
   </h3>
   <p>
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
   </p>
  </div>
 </div>
</div>
</div>
</div>

Answer 1

这个问题有几个解决方案。

最简单的方法是从#content-container 中删除绝对定位。这将允许margin: 0 auto 使 div 居中。为了解决当您将鼠标悬停在菜单上时的垂直移动问题（我怀疑这就是您将其设为绝对定位的原因），只需设置菜单 div 的高度（100px 似乎就足够了，但您可以使用它）。所以这些是你的修改：

 #menu {
      margin-top:150px;
      clear:left;
      float:left;
      padding:0;
      border-top:6px solid #336699;
      width:100%;
      overflow:hidden;
      height: 100px;
  }

  #content-container {
      margin:0 auto;
      width:1000px;
      background-color:#fff;
      left: 100px;
  }

如果你真的想保持#content-container 绝对定位，另一种解决方案是将#content-container div 包装在另一个div 中，比如#inner-wrapper，并将该div 的位置设置为相对。这将使#content-container 相对于#inner-wrapper 定位自身，而不是窗口。该 CSS 可能如下所示：

  #inner-wrapper {
    position: relative;
    margin: 0 auto;
    width: 1000px;
  }

但是，仅此技巧不会使菜单保持对齐。为此，您必须将菜单包装在这个新的 div 中，并修改您的 CSS/HTML 以使蓝色上边框仍然扩展页面的宽度。难度不大，但工作量更大。

就我个人而言，我只会做第一个解决方案，然后就收工了。

Answer 2

只需从#content-container 类中删除position:absolute;。否则 margin:0 auto; 将被忽略。此外，您似乎缺少上面的两个结束 div 标记。