How to center image in a div horizontally and vertically

Image in a div horizontally and vertically.

<div class="thumbnail">                
    <img src="image_path.jpg" alt="img">
</div>

.thumbnail {
    height: 200px;
    margin: 0 auto;
    position: relative;
}
.thumbnail img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

For vertical alignment, I would include some CSS to position it from the top 50% and then move it up half the number of pixels height of the image.

Horizontal, I would use a margin, as suggested.

So if your image was 100x100px you'd end up with.

<img id="my_image" src="example.jpg">

<style>
#my_image{
 position: absolute;
 top: 50%;
 margin: -50px auto 0;
}
</style>

Here is a tutorial for how to center the images vertically and horizontally in a div.

Here is what you are looking for:

.wraptocenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 200px;
  height: 200px;
  background-color: #999;
}
.wraptocenter * {
  vertical-align: middle;
}

<div class="wraptocenter">
  <img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>