Html 将子元素水平居中放置在比子元素窄的父元素内

我一直在尝试将一个宽

元素水平居中放置在一个

中，该元素没有图像本身那么宽。并且

上设置了

溢出：隐藏

例如，图像是
500px
宽，而DIV是
250px
宽。是否有任何干净的方法（这样它适用于任何尺寸的图像）将图像居中，以便只有中间部分显示在分区内。
您可以使用css将图像添加为背景，并将背景位置设置为中间位置。
既然您希望有响应行为，我建议您（对于简单的行为）

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

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

看看这个

Quick
这样做的目的是什么？为什么不干脆把图像剪下来？除非你计划向不同的方向滚动？您始终可以使用位置：x，y；对于您的图像也是如此。您可能需要具有多个维度的图像。@Keith-所讨论的图像无法更改，因为我需要不同视图中的同一图像。其次，我不能简单地将其作为背景正确定位的原因是我希望搜索引擎将其解析为具有SE相关的
标题
和
alt
的适当图像元素。谢谢您的回答。但我不能让内心的形象扭曲。它需要以其原始大小/比例显示，只是其中只有一部分（中间部分）是可见的。您还可以使用图像作为外部div的背景，并使用背景位置：center；我不能简单地将其作为背景正确定位的原因是我希望搜索引擎将其解析为一个适当的图像元素，并带有与SE相关的
标题
和
alt
。为什么图像会倾斜？只需指定它的大小，它将居中，只要你保持空白：自动；演示涉及根据容器调整图像的大小，这不是我想要的不起作用！我不能简单地将其作为背景正确定位的原因是我希望搜索引擎将其解析为具有SE相关的
标题
和
alt
的适当图像元素。
.Container {
    position: /* anything but static */
    width: 250px;
}

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

div {
 text-align: center;
}