未知尺寸照片的垂直居中方法

html 

<li class="item">
<div class="img-wrap" style="background-image: url('img/timg3.jpg')"></div>
<h5>夏达</h5>
<p>信息技术部</p>
<div class="vote-button">投票</div>
</li>
<li class="item">
<div class="img-wrap" style="background-image: url('img/timg4.jpg')"></div>
<h5>夏达</h5>
<p>信息技术部</p>
<div class="vote-button">投票</div>
</li>

 

css 

.img-wrap {

margin: 5px auto;
width:240px;
height:300px;
border: 1px solid #BECEEB;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}

 

主要采用背景图片居中的方法在设置图片尺寸为全包含。（ie8 及以下不支持）   图片建议写在html里 因为在css里不能动态加载；