イメージを水平にセンタリングする

Question

私はイメージを水平にセンタリングしようとしていましたが、試したことはすべて動作していません。この画像は画面サイズに関係なくdivの中心にある必要があるので、PCスクリーンや携帯電話にも表示されます（プロジェクト用です）。もし誰かが私を助けることができれば、私は大いに感謝します。

HTMLコード：

<div class = "main"> 
    <img src = "kidme.jpg" alt ="Me!" > 
</div> 

CSSコード：

.main { 
    background-color: #36454F; 
    width:100%; 
    height:345px; 
} 

img { 
    height:326px; 
    width:380px; 
    position: absolute; 
    margin-top: 20px; 
} 

Answer 1

これはできる作品：

.main { 
    background-color: #36454F; 
    width:100%; 
    height:345px; 
} 

img{ 
height:326px; 
width:380px; 
display: block; 
margin:auto; 
margin-top: 20px; 
} 

Answer 2

チェックこのリンク

https://plnkr.co/edit/LsuxKAtvScM4znT1ROci?p=preview

   <div class = "main"> 
       <div class="imgwrap"> 
       <img src = "kidme.jpg" alt ="Me!" > 
       </div> 
      </div>