CSS：在容器中居中图像

Question

首先，我对CSS有点新意，所以请原谅我，如果这是一个愚蠢的问题，或者我的代码没有多大意义 - 我已经尝试解决了我的问题，并且没有太多运气到目前为止。

我无法将图像居中，在div中应该在图像周围形成边框 - 我已经做了一个JFiddle来进一步解释：

https://jsfiddle.net/9yxco7ez/

这个想法是图像应该位于围绕它的边界div的中心。

HTML：

 <div class="sponsorLogos">
  <ul class="sponsorGallery">
   <li class="sponsorImg" ng-repeat="path in sponsorLogos">
    <a href="#">
      <img src="http://www.garcard.com/images/garcard_symbol.png">
    </a>
  </li>
 </ul>
</div>

CSS：

.sponsorLogos ul li {
  margin: 10px 10px;
  display: inline-block;
  height: 128px;
  width: 128px;
  border: solid 5px #e0e5eb;
  overflow: hidden;
}
.sponsorsDiv .sponsorLogos img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

我在这里找到了一些主题来尝试解决我的问题，但还没有成功..我知道那里可能是正确的答案，但是我找不到它，很抱歉如果这个问题在其他地方得到解答，请事先提前。