通常，您将图像居中display: block; margin: auto，但如果图像比容器大，则会向右溢出。如何使其均匀地向两侧溢出？容器的宽度是固定且已知的。图像的宽度未知。

纯CSS解决方案

需要一个额外的包装器（在 FireFox、IE8、IE7 中测试）：

改进的答案

原来的答案有问题（如下）。如果图像比容器大outer以其自动边距为中心，然后截断左侧的图像并创建过多的右边的空间，正如这个小提琴所示 http://jsfiddle.net/WAxn3/4/.

我们可以通过浮动来解决这个问题inner向右然后居中from正确的。这仍然会截断img离开页面到左侧，但它是通过明确地将其推向左侧然后居中离开该页面来实现的，这两者的组合就是防止extra右侧水平滚动。现在，我们只能获得所需的右侧滚动量，以便看到图像的右侧部分。

小提琴示例 http://jsfiddle.net/WAxn3/6/（小提琴中的边框仅用于演示。）

基本CSS

div.outer {
    width: 300px; /* some width amount needed */
    margin: 0 auto; 
    overflow: visible;
}
div.inner {
    position:relative;
    float: right; /* this was added and display removed */
    right: 50%;
}
div.inner img {
    position: relative; 
    right:-50%; /* this was changed from "left" in original */
}

如果你愿意no完全向右滚动以获得宽图像

然后使用上面的内容，还设置任何元素换行outer (like body http://jsfiddle.net/WAxn3/7/ or 第三个包装纸 http://jsfiddle.net/WAxn3/8/） 具有overflow: hidden.

原始想法（历史）

小提琴示例 http://jsfiddle.net/WAxn3/3/（小提琴中的边框仅用于演示。）

HTML

<div class="outer">
    <div class="inner">
        <img src="/yourimage.png">
    </div>
</div>

CSS

div.outer {
    width: 300px; /* some width amount needed */
    margin: 0 auto; 
    overflow: visible;
}
div.inner {
    display: inline-block; 
    position:relative; 
    right: -50%;
}
div.inner img {
    position: relative; 
    left:-50%; 
}