<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*.m-demo {float: left;display: inline; margin-left: 20px;}*/
/* 图片居中溢出隐藏 */
.m-demo{position:relative;300px;height:300px;overflow:hidden;border:1px solid #ddd;}
.m-demo p{position:absolute;top:50%;left:50%;margin:0;padding:0;}
.m-demo img{position:absolute;top:-50%;left:-50%;display:block;}
.m-demo img.hidden{visibility:hidden;position:static;}
</style>
</head>
<body>
<h2>图片宽高均小于div</h2>
<div class="m-demo">
<p>
<img src="img/1.jpg" class="hidden"/>
<img src="img/1.jpg" alt=""/>
</p>
</div>
<h2>图片高度小于div，垂直居中显示</h2>
<div class="m-demo">
<p>
<img src="img/2.jpg" class="hidden"/>
<img src="img/2.jpg" alt=""/>
</p>
</div>
<h2>图片宽高大于div，垂直居中显示部分图片</h2>
<div class="m-demo">
<p>
<img src="img/3.jpg" class="hidden"/>
<img src="img/3.jpg" alt=""/>
</p>
</div>
</body>
</html>