css 实现未知图片垂直居中

1.demo html部分

<div class="demo">
      <a href="#"><img src="img/help_03_03.png"/></a>
 </div>

2.demo 的CSS部分

.demo{
            border:1px solid #dddddd;
            width:208px;
            height:148px;
            overflow:hidden;
            text-align: center;
            display: table;
            float:left;
            margin:50px;
            position:relative;
        }

a标签部分

.demo a{
            display: table-cell;
            vertical-align: middle;
            width:200px;
            height:140px;
        }

img图片部分

.demo a img{
            border:1px solid #ddd;
            margin:0 auto;
            max-width: 200px;
            max-height: 140px;
        }

ie7兼容写法

/*for ie7*/
        *+html .demo a{
            position:absolute;
            top:50%;
            width:100%;
            text-align: center;
            height: auto;
                
        }
        *+html .demo a img{
            position:relative;
            top:-50%;
            left:-50%;
        }

ie6兼容写法

/* for ie6*/
     *html .demo a{
         position:absolute;
         top:51%;
         width:100%;
         text-align: center;
         height: auto;
         display: block;
     }
    
     *html .demo a img{
         position:relative;
         top:-50%;
         left:-50%;
     width:expression(this.width>200?“200px”:“auto”);
     height:expression(this.height>140?“140px”:“auto”);    
     }