Cacher is the code snippet organizer for pro developers

<style>
  .center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}
</style>
<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x200');">
</div>

<!-- REff: http://stackoverflow.com/questions/11552380/how-to-automatically-crop-and-center-an-image 
   Other Reff: http://stackoverflow.com/questions/26421274/css-circular-cropping-of-rectangle-image
-->