如何将图像置于div中间？

Question

我需要将图像置于div的中间.

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

在下面的示例中,图像居中,但不在中间.

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

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>