如何使图片在div里上下居中

<style type="text/css">
         .box {
         /*非IE的主流浏览器识别的垂直居中的方法*/
         display: table-cell;
         vertical-align:middle;

         /*设置水平居中*/
         text-align:center;

         /* 针对IE的Hack */
         *display: block;
         *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
         *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

         width:200px;
         height:200px;
         border: 1px solid #eee;
         
         width:100px;
         height:100px;
        }
        .box img {
         /*设置图片垂直居中*/
         vertical-align:middle;
         cursor:pointer;
        }
        </style>

 

 

Dom元素:

 

 

                  <div id="div1"  class="box">
                     <img src="xxx.png" /><br />风华绝代
                  </div>

 

 

 这种方式在ie8和firefox3.5中显示正确，在ie7及以下版本无法正确显示，其它浏览器没有测试。因此改成了下面的方式：

 

         .box{
         float:left;
         width:80px;
         height:80px;
         border: 1px solid #eee;
        }

        .selected {
            border:solid 1px black;
            background-color:Aqua;
            cursor:pointer;
        }
        .box img {
         /*设置图片垂直居中*/
         vertical-align:middle;
         cursor:pointer;
        }