如何将比其父 div 更宽的绝对元素 (img) 居中？答案

【问题标题】：How center an absolute element (img) that's wider than its parent div?如何将比其父 div 更宽的绝对元素 (img) 居中？
【发布时间】：2015-10-15 19:33:02
【问题描述】：

我正在尝试将绝对定位的 img 居中在相对定位的 div 中，并且图像大于其父级（在 767 像素或更低的窗口中）。但图像确实具有 767px 的固定宽度。让我感到困难的是父 div 没有固定宽度，它有 100% 的宽度，所以我必须以某种方式在每次调整大小时为“左”属性生成正确数量的像素，但我没有知识。我尝试设置百分比，但在调整大小时没有成功。

我已经能够用 javascript 做一些事情，但我宁愿有一个 css 解决方案，因为 javascript 对我来说不能始终如一地工作。

当父 div 小于 767px 并且 img 在 div 中始终保持 767px 并且高度为 257px 时，我需要能够居中 img。

感谢任何帮助！

html代码：

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

css:

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

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

【问题讨论】：

为什么图像上的min-width - 如果容器宽度超过 767 像素，您是否希望图像被拉伸以填充整个容器宽度？
当它的宽度超过 767px 时，它确实需要填满整个容器。使用“最小宽度”时，图像仍然是我想要的 767 像素，但是使用正常的“宽度”时，当窗口小于 767 像素时，图像会随窗口缩小

标签： css css-position absolute

【解决方案1】：

一种无需硬编码一半宽度的方法。

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

您可以这样做：

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

【讨论】：

我认为这比公认的答案还要简单。

【解决方案2】：

通过结合相对和绝对单位以及left 和margin-left：

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

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

【讨论】：

您也可以在不使用固定像素值的情况下执行此操作：left:-500%; right:-500%; margin:auto; – 您将图像从容器中“拖”到两侧，然后自动边距将其再次居中在该范围内。 jsfiddle.net/sru60agp/1
百分比值必须“足够大”，这样即使对于一个非常窄的容器，它仍然会将图像拖到两侧足够远，因为百分比是指容器的宽度。因此，对于一个真正小容器，它在某个点之后将不再工作 - 如果您使用开发工具在我的小提琴中手动将容器宽度设置为 70px 左右，然后进一步减小它，您将看看效果。
因此有用性取决于您的容器是否能够缩小。你可以通过使用更高的百分比来对抗它——百分比×容器宽度必须至少等于图像宽度的一半。但是使用非常极端的百分比（比如 5000%）可能会开始对渲染性能产生负面影响。
@CBroe 太棒了，谢谢！搜索了一段时间，您的评论适用于我的问题。