如何在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; }
适用于大多数现代浏览器： 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自动; 重要的是宽度
