如何將未知大小的圖像居中放在div中？

Question

所以，我有這些參數在div：

container { 
position:fixed; 
background-color: rgba(50,50,50,0.7); 
width:100%; 
height:100%; 
display:none;} 

它包含未知大小（大小DINAMIC，它可能是不同的）圖像。

我需要垂直和水平對齊圖像。

請幫助

Answer 1

背景圖像的方法將工作，與背景位置：中心爲中心，不幸的是你會失去你的縮放圖像的控制。

您可以將相關圖片如下：

position:absolute; 
margin:auto; 
top:0; 
bottom:0; 
left:0; 
right:0; 

PS。請記住，這將相對於其最接近的定位父母。

Answer 2

最簡單的跨瀏覽器的方式是設置動態的圖像作爲#container背景屬性：

<div id="container" style="background: url(path/to/image.png) no-repeat 50% 50%"></div> 

Answer 3

添加以下內容：

前兩個線垂直居中，最後水平居中。

display: table-cell; 
vertical-align: middle ; 
text-align: center; 

更多信息可以在這裏找到：http://www.w3.org/Style/Examples/007/center

Answer 4

這將垂直和水平居中。

#container { 
    text-align: center; 
    vertical-align: middle; 
    display: table-cell; 
} 

http://jsfiddle.net/nfBDT/

Answer 5

我認爲最簡單的方法是做到這一點：

.container img { 
    display:block; 
    margin:auto; 
} 

調整.container以滿足您的DIV（不知道，如果你是一個類或ID）

哦，我沒看過所有你的問題。

這似乎工作：

<style type="text/css"> 
.wraptocenter { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
    width: ...; 
    height: ...; 
} 
.wraptocenter * { 
    vertical-align: middle; 
} 
/*\*//*/ 
.wraptocenter { 
    display: block; 
} 
.wraptocenter span { 
    display: inline-block; 
    height: 100%; 
    width: 1px; 
} 
/**/ 
</style> 
<!--[if lt IE 8]><style> 
.wraptocenter span { 
    display: inline-block; 
    height: 100%; 
} 
</style><![endif]--> 

完全學分制：http://www.brunildo.org/test/img_center.html

Answer 6

http://zoffix.com/new/absolute-center-random-width-height.html

這是一個相當不錯的例子。通常你使用table/vertical-align作爲現代瀏覽器，併爲IE定位+％s。