画像を反応的に配置する方法は？

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