不管屏幕尺寸如何保持圖像居中？

Question

這是我創建的fiddle。我希望裝飾品始終留在屏幕中間。我無法弄清楚如何去做。我試圖把它包裝在一個div中，但這也不起作用。

HTML

<span class="border-top"></span> 

CSS

.border-top { 
background: url("http://i.imgur.com/Txoi4sd.png") no-repeat; 
clear: both; 
display: block; 
height: 47px; 
margin-bottom: 50px; 
width: 100%; 
} 

Answer 1

.border-top { 
 
    background: url("http://i.imgur.com/Txoi4sd.png") center center no-repeat; 
 
    clear: both; 
 
    display: block; 
 
    height: 47px; 
 
    margin-bottom: 50px; 
 
    width: 100%; 
 
}

<span class="border-top"></span>

這可能會訣竅。

參考：http://www.w3.org/TR/css3-background/#the-background

Answer 2

怎麼樣http://jsfiddle.net/wkkrnqqx/1/

.border-top { 
    background: url("http://i.imgur.com/Txoi4sd.png") no-repeat; 
    display: block; 
    height: 47px; 
    margin-bottom: 50px; 
    width: 100%; 
    background-position:50% 0; 
}