我有一个宽度为100像素和高度：100像素的div
在那里，只有一个图像，其高度总是固定为100像素。
在那里，只有一个图像，其高度总是固定为100像素。
我想让图像水平居中。
这里有3例：
>图像的宽度等于div的宽度，没有问题
> image的宽度小于div的宽度，我可以使用margin：auto这里
>图像的宽度大于div的宽度
我想让图像的中心部分在div中可见。
意味着，如果图像的宽度为120像素，并且div的宽度为100像素并且overflow：hidden
我想要图像的第10个像素到第110个像素可见(所以，左边的10px和右边的10px的图像被隐藏在div下面)
这可能通过一些CSS属性？
(我不知道正在加载的图像的宽度，所以我希望它是动态的。
也想避免javascript边计算找到额外的宽度和给左边边距：-ve值bla bla ..)
另外，我不能给图像作为div的背景图像！
解决方法
参见：
http://jsfiddle.net/thirtydot/x62nV/(和
without
overflow: hidden容易看到定心)
这将在所有浏览器中运行，除了IE6之外。
对于.imageContainer> span，margin-left是从宽度导出的，宽度是一个任意数字，用于控制将支持的最大图像宽度。你可以设置width：10000px; margin-left：-4950px;如果需要，支持真正宽广的图像。
HTML：
<div class="imageContainer">
<span><img src="http://dummyimage.com/100x100/f0f/fff" /></span>
</div>
CSS：
.imageContainer {
border: 1px solid #444;
overflow: hidden;
width: 100px;
height: 100px;
margin: 15px;
text-align: center;
}
.imageContainer > span {
display: block;
width: 1000px;
margin-left: -450px; /* -(width-container width)/2 */
}
.imageContainer > span > img {
display: inline-block;
}
