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>