如何将图像居中放置在div的中间？

Question

我需要将图像居中放置在 div 的中间。

 <div class="main">
    <img...>
</div>

在下面的示例中，图像居中，但不在中间。

https://jsfiddle.net/web_garaux/tng7db0k/

原文由 Daniel 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

简单易行的方法，

 .test {
  background-color: orange;
  width: 700px;
  height: 700px;
  display:flex;
  align-items:center;
  justify-content:center;
}

 <div class="test">
<img src="http://via.placeholder.com/350x150">
</div>

原文由 codesayan 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

要使您的 div 垂直居中，您可以使用 positioning 。只需申请

position: relative;
top: 50%;
transform: translateY(-50%);

到您的图像，它将垂直居中。

 .test {
  background-color: orange;
  width: 700px;
  height: 700px;
  text-align: center;
}

.test>img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

 <div class="test">
  <img src="http://via.placeholder.com/350x150">
</div>

原文由 andreas 发布，翻译遵循 CC BY-SA 3.0 许可协议