实现图片在容器累垂直居中有多种方法，例如计算高度使用margin，透明gif图片+背景定位等等，其中很多方法比较繁琐兼容性也不好，例如用position方法。下面为大家介绍两种比较简洁的方法，一种是利用display：table-cell实现 图片垂直居中，另一种是使用空白标签巧妙实现不同尺寸的图片在容器里垂直居中的方法；第二种方法是我为了解决前一种方法存在的兼容性为题而想出来的，这是在查了一些资料后，受到张鑫旭的博客的启发想到的。
一、先介绍display：table-cell的方法：
一、先介绍display：table-cell的方法：
话不多说上代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table-cell 图片居中</title>
<style type="text/css">
.wrap{
float: left;
}
a{display:table-cell;
vertical-align:middle;
width:128px; height:150px;
border:1px solid #beceeb;
text-align: center;}
img{
max-width:128px;max-height:150px;
}
</style>
</head>
<body>
<div class="wrap">
<a href="#" ><img src="images/1.jpg" alt='图片'></a>
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
