(1)背景法
<div class="wrap"></div>
.wrap{
width:300px;
height:200px;
background: url(../img/test.jpg) center center no-repeat;
}
(2) 图片外面用个p标签,通过设置line-height使图片垂直居中(兼容性较好)
<div class="wrap">
<img src="./img/test.jpg">
</div>
.wrap{
width: 300px;
height: 300px;
border: 1px solid #000;
text-align: center;
}
.wrap p{
width: 300px;
height: 300px;
line-height: 300px;
}
.wrap p img{
*margin-top:expression((300 - this.height )/2);
vertical-align: middle;
}
(3)display:table-cell(不支持IE6和7)
<div class="wrap">
<img src="./img/test.jpg">
</div>
.wrap{
width: 300px;
height: 200px;
border: 1px dashed #ccc;
display: table-cell;
vertical-align: middle;
text-align: center;
}
(4)添加table标签(兼容性好,但是冗余标签比较多)
<div class="wrap">
<table>
<tr>
<td align="center"><img src="./img/test.jpg"/></td>
</tr>
</table>
</div>
.wrap{
width: 300px;
height: 200px;
border: 1px dashed #ccc;
text-align: center;
}
.wrap table{
width: 300px;
height: 200px;
}