A CodePen by FaceLord. Centering thumbnails with transform: translate mixin - Centers thumbnails verically and horizontall within a given size.

index.html

<ul>
  <li class="thumbnail">
    <div class="centered"><img src="http://placekitten.com/200/400" alt="" class="portrait" /></div>
  </li>
  <li class="thumbnail">
    <div class="centered"><img src="http://placekitten.com/400/201" alt="" class="landscape" /></div>
  </li>
  <li class="thumbnail">
    <div class="centered"><img src="http://placekitten.com/200/300" alt="" class="portrait" /></div>
  </li>
  <li class="thumbnail">
    <div class="centered"><img src="http://placekitten.com/400/255" alt="" class="landscape" /></div>
  </li>
  <li class="thumbnail">
    <div class="centered"><img src="http://placekitten.com/200/340" alt="" class="portrait" /></div>
  </li>
  <li class="thumbnail">
    <div class="centered"><img src="http://placekitten.com/420/205" alt="" class="landscape" /></div>
  </li>
  <li class="thumbnail">
    <div class="centered"><img src="http://placekitten.com/220/400" alt="" class="portrait" /></div>
  </li>
  <li class="thumbnail">
    <div class="centered"><img src="http://placekitten.com/408/225" alt="" class="landscape" /></div>
  </li>
</ul>

style.scss

@import "compass";
body{
  padding: 30px;
}
@mixin center_thumbs($width: 100px, $height: 100px) {
	width: $width;
	height: $height;
	overflow: hidden;
	> *{
		width: 100%;
		height: 100%;
		@include translate(50%,50%);
		img {
				@include translate(-50%,-50%);
				&.landscape{
					max-height: 100%;
					width: auto;
				}
				&.portrait{
					height: auto;
					max-width: 100%;
				}
			}      
		}
}
ul li{
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}
%circle{
  border-radius: 50%;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

 
.thumbnail{
  position: relative;
  @include center_thumbs(100px, 100px);
  @extend %circle;
  @include transition(all .1s);
  border: 5px solid white;
  &:hover{
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
      
      border: 5px solid #f55;
  }
    &:after{
      content: "";
      display: block;
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      @extend %circle;
      box-shadow: inset 5px 5px 5px rgba(0,0,0,.5);
    }
}