[CSS] Centering an image in a div element (horizontally and vertically)

This tracks is edited from the example from internet, for detail please visit the links provided at the end of this article.

Sample HTML part:

<div class="m-image">
    <span></span><img src="https://research.google.com/images/google_welcome.jpg">
</div>
<div class="m-image">
    <span></span><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSLhTq-idzo_434-ouQ1tlllR6OPS5FW8G8O6skMeyhYsgU9xwkhQ">
</div>

Sample CSS part 

<style>
.m-image {width:150px;height:150px;float:left;border:1px solid #FDDAB3;margin:2px;background-color:#FEF4DE; text-align:center;}
.m-image img {max-width:150px; max-height:150px}
.m-image * {vertical-align:middle;}
.m-image span {height:100%;display:inline-block;}
</style>

 Result:

Reference:
http://gela-notepad.blogspot.hk/2011/11/fw-vertical-align-css.html
http://www.brunildo.org/test/img_center.html