CSS 图片水平垂直居中于DIV

对于前端工作人员，可能都会碰到要把一个图片垂直居中于一个父元素，当我们不知道它的高度时，应该如何去处理呢 ，我把我整理过的一个DEMO 上传和大家分享，有什么问题可以 互相交流和讨论。 不一定来说我的方法就是最好的，如果有更好的方式 ，互相分享一下。

 

CSS部分  

 

.zxx_align_box_4 li{float:left; margin-right:13px;}
 .zxx_align_box_4 li div{display:table-cell; width:200px; height:200px; border:1px solid #beceeb; *font-size:174px; text-align:center; vertical-align:middle; line-height:200px; }
 .zxx_align_box_4 li div img{vertical-align:middle;}

 

HTML部分

 

 

 <ul class="zxx_align_box_4 clearfix">
                    <li>
                        <div>   <img src="../img/t1.jpg" /></div>
                    </li>
                    <li>
                        <div>   <img src="../img/t2.jpg" /></div>
                    </li>
                    <li>
                        <div><img src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg"></div>
                    </li>
                    <li>
                        <div><img src="http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg"></div>
                    </li>
                </ul>