css - 如何将比其父 div 宽的绝对元素 (img) 居中？

Question

我正在尝试将绝对定位的 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;
}

Answer 1

无需硬编码一半宽度即可执行此操作的方法。

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

您可以这样做:

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