问如何在一个100%宽度的div中水平居中一个绝对定位的元素？

EN

您必须为margin: auto指定left和right属性0值以使徽标居中。

因此，在这种情况下：

#logo {
  background:red;
  height:50px;
  position:absolute;
  width:50px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

您可能还想为#header设置position: relative。

这是因为，将left和right设置为零将水平拉伸绝对定位的元素。现在，当margin被设置为auto时，魔术就会发生。margin占用了所有额外的空间(两边相等)，将内容保留给它指定的width。这会导致内容居中对齐。

答案中没有使用calc，这是一个更干净的解决方案。

#logo {
  position: absolute;
  left: calc(50% - 25px);
  height: 50px;
  width: 50px;
  background: red;
}

​

​

适用于大多数现代浏览器：http://caniuse.com/calc

也许在没有后备的情况下使用它还为时过早，但我认为对未来的访问者来说，这可能会有所帮助。

根据我的经验，最好的方式是right:0;、left:0;和margin:0 auto。这样，如果div很宽，那么您就不会受到left: 50%;的阻碍，因为它会抵消div，从而导致添加负边距等。

演示http://jsfiddle.net/kevinPHPkevin/DeTJH/4/

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    margin:0 auto;
    right:0;
    left:0;
}