Question

我一直试图将<img>内的宽<div>元素水平居中，而这个元素并不像图像本身那么宽。并且<div>已设置overflow: hidden。

例如，图像宽500px，DIV宽250px。有没有干净的方式（这样它适用于任何尺寸的图像）使图像居中，只有中心部分显示在div内。

Answer 1

<div class="Container">
    <img class="Thumb">
</div>

并且：

.Container {
    position: /* anything but static */
    width: 250px;
}

.Thumb {
    position: relative;
    width: 500px;
    margin: 0 auto;
}

Answer 2

您可以使用css将图像添加为背景，并将背景位置设置为居中中心。

Answer 3

由于您期望有响应行为，我建议（对于一个简单的行为）

div {
 text-align: center;
}

但是使用 CSS3和媒体查询 是可能的。

快速demo