您需要定义要居中的图元的宽度，而不是父图元的宽度。

#header ul {
    margin: 0 auto;
    width: 90%;
}

• 编辑 *：好了，我已经看到了测试页，下面是我认为您需要的方式：

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}

一个inline-block覆盖了整行（从左到右），所以左边距和/或右边距在这里不起作用。你需要的是一个block，一个block在左边和右边都有边框，所以可以受边距的影响。
这就是我的工作原理：

#content {
display: block;
margin: 0 auto;
}

为什么不呢？

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

我不知道为什么第一个答案是最好的，我试过了，但实际上不起作用，正如@kalys.osmonov所说，你可以把text-align:center赋予header，但你必须把ul赋予inline-block而不是inline，而且你必须注意到text-align可以继承，这在某种程度上是不好的，所以更好的方法（在IE 9下不起作用）是使用margin和transform。只需从ul中删除float right和margin;0 auto，如下所示：

#header ul {
   /* float: right; */
   /* margin: 0 auto; */
   display: inline-block;
   margin-left: 50%; /* From parent width */
   transform: translateX(-50%); /* use self width which can be unknown */
  -ms-transform: translateX(-50%); /* For IE9 */
}

这种方法可以解决在不考虑IE8等标准的情况下，使ul的动态宽度居中的问题。

我们可以为ul标签设置宽度，然后它将居中对齐。

#header ul {
    display: block;
    margin: 0 auto;
    width: 420px;
    max-width: 100%;
}

使用这个CSS来使div在绝对位置居中。这里，用容器的选择器替换container。

container { 
  left: 50%;
  transform: translateX(-50%);
}