1.利用vertical-align:middle； 父级元素设置成display:table-cell; 同级元素设置一个span标签 设置display:inline-block；图片样式设置vertical-align:middle;
添加的span标签要给高度100%; display:inline-block;
HTML
<div>
<span></span>
<img src="images/list3_1.jpg">
</div>
css
<style type="text/css">
div {
width: 400px;
height: 300px;
display: table-cell;
/*水平居中*/
text-align: center;
}
div span{
display: inline-block;
height: 100%;
vertical-align: middle;
}
div img {
vertical-align:middle;
}
</style>
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style type="text/css">
div {
width: 400px;
height: 300px;
display: table-cell;
/*水平居中*/
text-align: center;
}
div span{
display: inline-block;
height: 100%;
vertical-align: middle;
}
div img {
vertical-align:middle;
}
</style>
<div>
<span></span>
<img src="images/list3_1.jpg">
</div>
</body>
</html>
2.上面的结构 会多个多余的标签
HTML
<div>
<a href="">
<img src="">
</a>
</div>
CSS
div {
width:221px;
height:70px
}
div a{
display:inline-block;
width:221px;
height:70px;
line-height:70px; /*垂直居中关键 行高 高度 inline-block 还有图片vertical-align:middle*/
text-align:center; /*水平居中*/
}
div a img{
vertical-align"middle;
}
兼容 IE7+以上可以