如何使宽度大于父元素的绝对定位元素（img）居中对齐？

Question

我正在尝试将绝对定位的img居中放置在相对定位的div内，但是图像大于其父级（在767px窗口或更低）。但是该图像确实具有固定的宽度为767px。让我感到困难的是父div没有固定的宽度，它具有100％的宽度，因此我必须以某种方式在每次调整大小时生成'left'属性的正确像素数量，但是我不知道如何做到这一点。我尝试设置百分比，但在调整大小时没有成功。

我已经能够在javascript中使用它，但我宁愿有一个CSS解决方案，因为Javascript对我来说并不始终有效。

当父div变小到767px以下且img始终保持在div内的高度为257px时，我需要能够将img居中。

任何帮助都将不胜感激！

html代码：

<div class="item">
  <img src="...">
</div>

CSS：

.item{
position:relative;
height:257px;
overflow:hidden;
}

.item img{
min-width:767px;
position:absolute;
}

- Noob17

---

为什么要在图像上使用 min-width - 如果容器宽度大于767px，您是否希望将图像拉伸以填充整个容器宽度？ - CBroe

当屏幕宽度大于767像素时，需要填充整个容器。使用“min-width”属性，图像保持在767像素大小，如我所愿，但是如果使用普通的“width”属性，则图像将随着窗口变小而缩小到小于767像素。 - Noob17

Answer 1

不需要硬编码一半的宽度即可完成此操作。

例如，也许您的子元素具有无法预测的可变宽度

您可以使用以下方法代替：

left: 50%;
transform: translateX(-50%);

- Jack

---

我认为这甚至比被接受的答案还要简单。 - Dávid Molnár

Answer 2

通过组合使用相对单位和绝对单位以及 left 和 margin-left 属性：

.item img {
    <b>left: 50%;
    margin-left: -383.5px; /* Half of the width */</b>
    min-width: 767px;
    position: absolute;
}

这只是因为您在问题中提到图像的宽度固定为767px; 如果它只是一个最小值，并且可以变得更大，您需要使用不同的方法。

- Ry-

---

您也可以不使用固定的像素值来实现这一点：left:-500%; right:-500%; margin:auto; - 您可以将图像“拖”到容器的两侧，然后自动边距会使其再次在此范围内居中。http://jsfiddle.net/sru60agp/1 - CBroe

百分比的值只需要“足够大”，即使是非常狭窄的容器也可以将图像拉到两侧，因为百分比是相对于容器的宽度而言的。因此，对于一个真正的小容器，在某一点之后它就不再起作用了——如果你在我的 fiddle 中使用开发工具手动将容器宽度设置为约 70px，然后进一步缩小它，你会看到效果。 - CBroe

因此，其有用性取决于您的容器是否可以变得如此狭窄。您可以通过使用较高的百分比（百分比×容器宽度必须至少等于图像宽度的一半）来对抗它，但是使用极端百分比（例如5000％）可能开始对呈现性能产生负面影响。 - CBroe

@CBroe 太棒了，谢谢！我已经搜索了一段时间，你的评论解决了我的问题。 - Matt Pierce