Position image in the center of a div element using css

In some cases we might need to position an image in the center of a div element. Using CSS we can do it very easily. CSS absolute and relative position will help in this context. Let say we have a div element with 500px width and height. The image element is inside the div and we need to put the image in the center of the div. See the code below:

HTML elements

<div class="over">
  <img class="image_tag" src="http://a.dryicons.com/images/icon_sets/minimalistica_icons/png/128x128/world.png">
</div>

Style

.over
{
  position:relative;
  width:500px;
  height:500px;
  background-color:#ccddee;  
}
  
.over .image_tag
{
 position:absolute;
 top:0;
 left:0;
 bottom:0;
 right:0;
 margin:auto !important;
}

Output