如何使用百分比寬度居中放置絕對位置圖像？

Question

我有以下CSS圖像：

element.style { 
    right: 50%; 
    margin-right: -220px; 
    top: 31%; 
    width: 440px; 
    position: absolute; 
} 

我需要使得寬度以百分數設置代替（35.4％），以改變它。我能否仍然居中並保持立場絕對？

Answer 1

當然，如果你想用同樣的方式如上只使用35.4/2 = 17.7作爲保證金（DEMO）：

element.style { 
    right: 50%; 
    margin-right: -17.7%; 
    top: 31%; 
    width: 35.4%; 
    position: absolute; 
} 

Answer 2

您可以水平中心使用

left:0; right:0; margin:auto; 

所以，如果你有一個div作爲標記，css將是

div 
{ 
    top: 31%; 
    width: 38%; 
    height: 100px; 
    position: absolute; 
    left:0;right:0; 
    margin: auto; 
} 

FIDDLE

只要你定義的寬度（以像素或百分比 - 這並不重要），這將工作