Image in center of the container

main.css

li {
  list-style: none;
  display:inline-block;
  margin:20px;
  background:#444;
  width:300px;
  height:300px;
  overflow:hidden;
}

div{
  background:#ccc;
  width:100%;
  height:100%;
  position:relative;
}

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

main.html

<ul>
  <li>
    <div>
      <img src="http://3.im.guokr.com/6QhVWSLgiZKcaRxVgeH0JX8tqSzHJwtln7bFFZmxnnQmAgAANQEAAEpQ.jpg">
    </div>
  </li>
  <li>
    <div>
      <img src="http://1.im.guokr.com/Y_2WImlqV9ZEWFF3VrGldTxAoIWNAt_Bmx9ggzdhPs3oAwAA5gIAAEpQ.jpg?imageView2/1/w/640/h/474">
    </div>
  </li>
</ul>