Question

我一直试图将图像水平居中，但我尝试过的所有东西都没有工作过。无论屏幕大小如何，我都需要将此图像放在div的中心，因此它也可以显示在PC屏幕和手机的中心（对于项目而言）。如果有人可以帮助我，我会非常感激。

HTML code：

 <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>

水平居中图像

2 个答案: