纯CSS图片垂直居中，兼容IE6/IE7

制作网页的时候，常常会遇到很多 logo 图标排在一起的图标墙，每个图标的位置大小是固定的，但是 logo 的大小却很不一样，有长的有短的，有宽的有高的，有很大的也有很窄的，我们为了好看需要把图标弄的一致，设计师去做当然是最完美了，但有时候这些 logo 是后台取的，是用户上传的。

这个时候就需要我们程序去控制了，可以用JS去判断宽高比动态调整，但用JS毕竟麻烦了些，能用CSS搞定当然最好了，介绍一种CSS的方法，兼容IE6/IE7哦。

示例logo如下：

效果如下：

为了看的清楚，第二个位置加了背景色。

HTML代码：

<div class="pic-size">
    <div class="pic-wrap">
        <img src="../images/vertical_center.png">
    </div>
</div>

CSS代码：

.pic-size{
     width: 140px;
    height: 100px;
    border: 1px solid #eee;
    *position: relative;
}
.pic-wrap{
    height: 100px;
    display: table-cell;
    vertical-align: middle;
    *height: auto;
    *position: absolute;
    *top: 50%;
}
.pic-wrap img{
    float: left;
    width: 100%;
    *position: relative;
    *top: -50%;
    *display: block;
}

标准浏览器中，改变 display 的属性为 table-cell，也就是变为表格形式，然后配合 vertical-align 的垂直居中就实现了。

而 IE6/IE7 兼容的方法则是利用了定位，先将 top 的属性值设置为 50%，再在最里层 img 标签的 top 设置为-50%，就是CSS代码中的Hack部分。

这种方法对于 logo 宽度大于或略小于位置的宽度是很不错的，logo 很窄很窄那就不理想了。