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

Question

在下面的例子中,#logo绝对定位,我需要它水平居中#header.通常情况下,我会margin:0 auto为相对定位的元素做一个但我被困在这里.有人能给我指路吗？

JS小提琴:http://jsfiddle.net/DeTJH/

HTML

<div id="header">
    <div id="logo"></div>
</div>

CSS

#header {
    background:black;
    height:50px;
    width:100%;
}

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px
}

Answer 1

如果要对齐左侧属性中心.
同样的事情是顶部对齐,你可以使用margin-top :( div的宽度/ 2),概念与left属性相同.
将header元素设置为position:relative是很重要的.
试试这个:

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

DEMO

如果您不想使用计算,可以执行以下操作:

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

DEMO2

Answer 2

您必须分配两者left和right属性0值margin: auto才能使徽标居中.

所以在这种情况下:

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

您可能还需要设置position: relative的#header.

这是有效的,因为设置left和right零将水平拉伸绝对定位的元素.现在魔法发生时margin,设置为auto.margin占用所有额外空间(同样在每一侧),将内容留给指定的内容width.这导致内容变得中心对齐.

Answer 3

calc在答案中缺少使用,这是一个更清洁的解决方案.

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

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

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

Answer 4

根据我的经验,最好的方法是right:0;,left:0;和margin:0 auto.这样,如果div很宽,那么你不会受到阻碍left: 50%;你的div的阻碍,这会导致增加负边距等.

DEMO http://jsfiddle.net/kevinPHPkevin/DeTJH/4/

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