div+css垂直居中

一、显示的图片分别为小图，宽度大的图片，高度大的图片分别显示以下效果。

<style type="text/css">   

.example{  

100%;    

text-align:center;    

margin-bottom: 30px;    

margin-top: 20px;

}

.example  div{  

500px;  

height:400px;    

text-align: center;    

display: table-cell;    

vertical-align: middle;    

border: 1px solid rgba(0, 0, 0, 0.43); }

.example  img{    

max-height:400px;  

max-500px;    

vertical-align: middle; }

</style>  

<div class="example fn-clear" >

                    <center>                               

                                 <div>                                    

                                   <img style="border: 1px solid grey" src="C:UsersPublicPicturesSample Picturesw.jpg"/>                               

                                 </div>                    

                   </center>  

                </div>

</body>

</html>

二、显示一排图片的处理效果

<style type="text/css">

.list_con li{  float:left;  padding:25px 18px 0 0;  146px; }

.list_con li div {  border: 1px solid  #000;     border-image: none;     146px;     height: 146px;     text-align: center;     vertical-align: middle;     display: table-cell;     line-height:143px; }

.list_con .ph_pic img{  max-146px;  max-height:146px;     vertical-align: middle; }

.list_con p{  padding:8px 0 5px;  text-align:center; }

.list_con p img{  padding:0 16px;  16px;  height:16px; }

.fn-clear:after {  visibility:hidden;  display:block;  font-size:0;  content:" ";  clear:both;  height:0; }

.fn-clear {  zoom:1; /* for IE6 IE7 */ }

</style>

<div class="list_con fn-clear">
         <ul style="list-style:none">
             <li>
                <div>
                 <a  target="_blank" class="ph_pic"   href="#"> <img style="border: 1px solid grey" src="../../UploadFiles/123.gif"/><a>
                </div>                 
                </li>
                /* 复制7个li*/
            </ul>
 </div>

效果如下：