div中的img垂直居中

<html>
    <head>
         <style type="text/css">
             .imgDiv {
                 overflow: hidden;
                 display:table;
                 border-spacing:10px;
                 position: absolute;
                 left: 50%;
                 top: 50%;
                 width: 900px;
                 height: 600px;
                 margin-left: -450px;
                 margin-top: -300px;
             }
             .imgDiv li {
                 width:900px;
                 height:600px;
                 text-align:center;
                 vertical-align:middle;
                 position:relative;
                 margin: 10px;
                 *float:left;
                 display: table-cell;
             }
             .imgDiv .imgDivs {
                 *position:absolute;
                 top:50%;
             }
             .imgDiv .imgDivs img {
                 *position:relative;
                 top:-50%;
                 left:-50%;
                 max-width:900px;
                 max-height:600px;
                 width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "900px": "auto" );
                 height:expression(document.body.clientHeight>document.getElementById("pic").scrollheight*9/10? "600px": "auto" );
             }
        </style>
    </head>
    <body>
        <div class="imgDiv">
            <li><div class="imgDivs"><img src="http://mat1.qq.com/www/images/allskin/wmlogo.gif" ></div></li>
        </div>
    </body>
</html>

max-width:900px;
max-height:600px;
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "900px": "auto" );
height:expression(document.body.clientHeight>document.getElementById("pic").scrollheight*9/10? "600px": "auto" ); 

其中这几句是对于img大小的处理，如果img大小超出div容器的大小，会按照这个进行缩放显示，如果img没有超出div容器的大小，会正常显示，img原来多大，就显示多大