在可調整大小的背景上固定位置中居中元素

Question

我正在嘗試將精確大小的元素居中放置在專門爲其構建的背景上，以使其看起來無縫。

在以下代碼中，#window代表瀏覽器的窗口大小（以像素爲單位）（將其更改爲任何內容）。 #background顯然是指我將要使用的背景圖像，而#positionMe是我想要放在背景上的對象。即使窗口已調整大小，我也希望背景始終位於瀏覽器的中心位置，並且我希望小貓始終位於背景上的黑色框中。

正如您在下面看到的那樣，問題在於背景未以視口爲中心開始;它基於瀏覽器的總寬度居中。當你調整屏幕大小時，它不會相應地進行調整。

HTML：

<div id="window"> 
    <div id="background"> 
     <img id="positionMe" src="http://cs421018.vk.me/v421018778/74bc/NearuIJQIck.jpg" /> 
    </div> 
</div> 

CSS：

#window { 
    background-color: red; 
    width: 1280px; 
    height: 720px; 
} 
#background { 
    background: url('http://i.imgur.com/xzDclz5.jpg') no-repeat; 
    width: 500px; 
    height: 500px; 
    margin: 0 auto; 
} 
#positionMe { 
    position: relative; 
    top: 174px; 
    left: 154px; 
} 

這Fiddle證明我的問題。

Answer 1

使用display:table-cell和vertical-align:center的組合將垂直居中您的圖像。另外，您可以簡單地使用text-align:center來水平居中您的圖像。

http://jsfiddle.net/reinmcha/XtQ37/10/

可能需要做一些調整，以保持中心的背景股利。所以，我們添加另一個div並設置爲display:table。 「表格單元格」將填補整個事情。現在我們以margin: 0 auto爲中心。

最終產品：

http://jsfiddle.net/reinmcha/XtQ37/20/

可能需要做一些更新，以獲取圖像與邊框完美的中心（因爲它有寬...）

Here's my go at it.

我希望你們知道這個話題有很多文章。到處搜索。你會發現你的答案:)

Answer 2

你基本上有兩種選擇，一是將使用一個div來顯示圖像，使圖像居中的背景下，像這樣：

<div id="window"> 
    <div id="background"> 
     <div id="centerMe"></div> 
    </div> 
</div> 

與CSS：

#centerMe { 
width: 100%; 
height: 100%; 
background: url('http://cs421018.vk.me/v421018778/74bc/NearuIJQIck.jpg') no-repeat center; 
} 

或一個純CSS的解決方案：

#background { 
    background: url('http://i.imgur.com/xzDclz5.jpg') no-repeat; 
    width: 500px; 
    height: 500px; 
    margin: 0 auto; 
    text-align: center; 
} 
#background:before { 
    content: ""; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 
#centerMe { 
    vertical-align: middle; 
}