在div内垂直对齐图像？

Question

我能够将我的图像项目水平居中于我的div中，但我如何垂直实现这个呢？

重要的是要注意图像高度可能会有所不同。

http://jsfiddle.net/7b3mu9wt/5/

li {
  float: left;
  width: 195px;
  height: 195px;
  border: 1px solid black;
  list-style-type: none
}
li div {
  text-align: center
}

<ul>

  <li>
    <div>
      <img class="logo" src="http://placehold.it/50x50" />

    </div>
  </li>


  <li>
    <div>
      <img class="logo" src="http://placehold.it/50x100" />

    </div>
  </li>

</ul>