您如何輕松地將圖像居中到DIV？

Question

<div style="width:200px;height:200px;overflow:hidden;">
    <img src=".." this is a 300x500 image. > 
</div>

如何使它產生200x200的圖像（DIV覆蓋圖像的其余部分），但圖像居中？

最簡單的方法是什么？ 一些JQuery插件？ 你會怎么做？

編輯：我希望它垂直和水平對齊。

Answer 1

更簡單的解決方案：將圖像設置為<div>上的background-image （position = 50% 50% ）:)

這可以通過jQuery 實現 （盡管這並不意味着這是一個好方法，只是在說）：

var $div = $('div'),
    $img = $('img', $div),
    src = $img.attr('src');

$div.css('background', 'url(' + src + ') no-repeat 50% 50%');
$img.remove();

Answer 2

這應該工作，嘗試一下

div.img{
text-align:center
}

Answer 3

這似乎可行：

您可以計算容器和圖像之間的寬度差，並使用負的margin-left偏移該量/ 2。 即(300px - 200px) / 2 = 50px

<div style="width:200px;height:200px;overflow:hidden;">
    <img src="test.png" style="margin-left:-50px">
</div>

Answer 4

如果使用文本居中對齊，則文本也將居中對齊。 為了避免在div / span中放置此圖像，請設置div / span的寬度，並使用margin：0 auto;

 <div style="width:50px; margin: 0 auto;"> <img src="test.png"></div>

請記住，您的圖片還必須與div大小相同，即在這種情況下為50像素，或者將圖片寬度設置為50像素。

Answer 5

這是一個純JS解決方案： http : //jsfiddle.net/steve/Ljgm8/用於任何大小的div，任何大小的圖像，任何瀏覽器，沒有容器，沒有其他庫。

（Firefox中的獎金- opacity樣式可讓您看到基礎子元素正確居中。）