html - 固定高さのdivで可変高さのdivを垂直方向に中央揃えする方法

Question

製品の画像 div を作成しようとしています。ほぼすべてを試しましたが、まだ小さな問題を解決できません。固定高さのボックスで画像を垂直方向に中央揃えにしたいだけです。画像のサイズは新しい製品画像ごとに異なります。 . ここに私のコードHTMLがあります:

<div class="main-pic">
 <ul>
     <li><img src="images/extra/laptop.jpg"></li>
     <li><img src="images/extra/laptop1.jpg"></li>
     <li><img src="images/extra/laptop2.jpg"></li>
     <li><img src="images/extra/laptop3.jpg"></li>
     <li><img src="images/extra/laptop4.jpg"></li>
     <li><img src="images/extra/laptop5.jpg"></li>
 </ul>
</div>

CSS:

.main-pic{width:430px;height:430px;border:1px solid black;margin:20px auto;display:block;float:none;overflow:hidden;}
.main-pic ul{width:10000px;}
.main-pic ul li{width:430px;height:430px;float:none;display:block;margin:-25% auto auto;position:relative;top:50%;}
.main-pic ul li img{max-width: 400px;height:auto;max-height: 400px;width: auto;}

verical-align:middle; display:table参考までに、私はすでに試しtable-cell ましたが、間違った方法で使用している可能性があります...助けてください:(