您如何轻松地将图像居中到 DIV？答案

【问题标题】：How do you easily center an image to a DIV?您如何轻松地将图像居中到 DIV？
【发布时间】：2010-12-01 07:39:20
【问题描述】：

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

你怎样才能使它产生一个 200x200 的图像（DIV 覆盖图像的其余部分），但图像居中？

最简单的方法是什么？一些 JQuery 插件？你会怎么做？

编辑：我希望它垂直和水平对齐。

【问题讨论】：

标签： javascript jquery html css templates

【解决方案1】：

更简单的解决方案：将图像设置为<div> 上的background-image，而不是（位置=50% 50%）:)

这个可以通过 jQuery 成为achieved（虽然不是暗示这是一个好方法——只是说）：

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

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

【讨论】：

【解决方案2】：

这似乎有效：

您计算容器和图像之间的宽度差异，并使用负数 margin-left 将其偏移该数量 / 2。 IE。 (300px - 200px) / 2 = 50px

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

【讨论】：

@marting ，这肯定会工作，但我们应该得到图像的高度和宽度也是正确的？？
@gov 你的意思是图像宽度可以是动态的，即我们需要在运行时进行偏移量计算？
如果 IE 播放，我会将图像放在具有图像宽度/高度的额外支架 <div> 中，并偏移 margin-left 负值。
对于动态，您需要使用 jQuery 或类似的东西 1) 等待图像的 load 事件。 2）测量图像并调整偏移量。

【解决方案3】：

这个应该可以了，试试看

div.img{
text-align:center
}

【讨论】：

我认为你的意思是 div img - 没有 img 类。

【解决方案4】：

如果你使用文本居中对齐，文本也会居中对齐。为避免在 div/span 中放置图像，请设置 div/span 的宽度并使用 margin :0 auto；

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

请记住，您的图像也必须与 div 大小相同，即在这种情况下为 50 像素，或者将图像宽度设置为 50 像素。

【讨论】：

【解决方案5】：

这是一个纯 JS 解决方案：http://jsfiddle.net/steve/Ljgm8/ 适用于任何大小的 div、任何大小的图像、任何浏览器、没有容器、没有额外的库。

（Firefox 中的奖励 - opacity 样式让您可以看到底层子元素正确居中。）

【讨论】：