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

Answer 1

Cleanest solution would be to make your div display:flex and align/justify content to center.

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

Your updated Fiddle: https://jsfiddle.net/y9j21ocr/1/

More reads on flexbox (recommended)