如何响应地定位图像？

Question

您好我无法将图像放在列表项上并使其响应。在全宽度它工作，它正确定位，但当我收缩浏览器时，它开始失去对齐。你可以在下面的图片中看到我在说什么。

全宽:(浏览器宽度为1920像素）

浏览器缩小后:(浏览器宽度为1400像素）

HTML :(此问题需要最低限度的HTML）

<section class="contact">
    <ul>
        <li>
            <img src="/images/footer_box.svg" >
        </li>

        <li>
            <img src="/images/footer_box.svg" >
        </li>

        <li>
            <img src="/images/footer_box.svg" >
        </li>
    </ul>
</section>

CSS :(此问题所需的最低css）

.contact ul li  {
    position: relative;
}

.contact ul li img {
    position: absolute;
    left: 214px;
    top: -110px;
}

谢谢！

Answer 1

如果你想让它居中。

.contact ul li img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}