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

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

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

示例logo如下：

效果如下：

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

HTML代码：

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很窄很窄那就不理想了。