水平居中图像

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>