如何在100%宽度div内水平居中放置绝对位置的元素?

在下面的例子中, #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 } 

如果你想alignment左边属性的中心。
同样的事情是顶部alignment,你可以使用margin-top:(div的width / 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

您将不得不分配left两个属性值为margin: auto来居中放置徽标。

所以在这种情况下:

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

您可能还想设置position: relative对于#header

这是有效的,因为将left设置为零将水平拉伸绝对定位的元素。 现在当margin设置为auto时,就会发生魔法。 margin占据了所有额外的空间(同样在每一边)将内容留在指定的width 。 这导致内容成为中心alignment。

在答案中缺lesscalc的使用,这是一个更清洁的解决scheme。

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

的jsfiddle

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

也许现在使用它还为时过早,但是我想也许对未来的访问者会有所帮助。

根据我的经验,最好的方法是right:0;left:0;margin:0 auto 。 这样,如果div宽,那么你不会受到left: 50%;阻碍left: 50%; 这将抵消你的股利,导致增加负利润率等

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

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

这里是最好的实践方法中心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; } 

它很容易,只需将其包装在如下的相对框中即可:

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

相对框有一个边距:0自动; 重要的是宽度