如何將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汽車; ，重要的是，一個寬度... ...