水平居中图像

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>