How to center an image in the middle of a div? [duplicate]

Question

I need to center an image in a middle of a div.

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

In the example below the image is centered, but not in the middle.

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

Answer 1

Simple and easy method to do this,

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