html - 在比子元素窄的父元素内水平居中子元素

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;
}