css to horizontally and vertically center an image in a div

demonstrates css for horizontally and vertically centering an image (img) in a div

HTML

<div class="tile" >
    <img alt="a TALL photo" src="http://www.djc.com/blogs/SeattleScape/wp-content/uploads/2012/08/chinatwo.jpg" style="" />
</div>

<div class="tile">    
    <img alt="a WIDE photo" src="https://upload.wikimedia.org/wikipedia/commons/4/46/Sio_se_pol.jpg" 
     />
</div>

CSS

div.tile{
    width: 200px;
    height: 200px;
    position: relative;
    margin: 7px;
    float: left;
    background-color: #FFE0E0;
    border: 1px solid #AAA;
}
img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 80%; 
    max-width: 100%;
}