如何将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属性相同。
将头元素设置为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

根据我的经验，最好的方法是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; 
} 

Answer 4

这里是最好的实践方法，以中心一个div绝对位置

DEMO FIDDLE

码 -

#header { 
background:black; 
height:90px; 
width:100%; 
position:relative; // you forgot this, this is very important 
} 

#logo { 
background:red; 
height:50px; 
position:absolute; 
width:50px; 
margin: auto; // margin auto works just you need to put top left bottom right as 0 
top:0; 
bottom:0; 
left:0; 
right:0; 
} 

Answer 5

失踪使用calc中答案，这是一个更清洁的解决方案。

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

作品中最现代的浏览器：http://caniuse.com/calc

也许是太早使用没有回退，但我想，也许为未来的游客将是有益的。

Answer 6

它很容易，只要把它包在像这样相对框：

<div class="relative"> 
<div class="absolute">LOGO</div> 
</div> 

相对盒具有保证金：0汽车; ，重要的是，一个宽度... ...