Align image in center and middle within div

I have following div

<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="https://stackoverflow.com/questions/4888223/img.png">
</div>

How to align the image so as to be located in the middle and center of div ?

body {
  margin: 0;
}

#over img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

<div id="over" style="position:absolute; width:100%; height:100%">
  <img src="https://www.garcard.com/images/garcard_symbol.png">
</div>

JSFiddle