DIV里面的图片水平与垂直居中的方法

<div class="detailMiddle">
       <img class="detailImg" src="~/Img/artwork/ArtWorkHome/yspsy_15.jpg"/>
 </div>

.artworkDetail .detailMiddle{display:block;height:100%;width:830px;float:left;text-align:center;line-height:750px;}
.artworkDetail .detailMiddle .detailImg{display:inline-block;vertical-align:middle;}

--------------------------------------------------------------------------------------------------------------------------

<div class=“box”>

　　<img />

</div>

1.水平居中：

　　1）box设置text-align:center;    text-align:center可以实现子元素字体，图片的水平居中。

      2）img设置margin:0 auto;display:block;            margin:0 auto是针对块元素的水平居中方法，所以要加上display：block。

2.垂直居中：

　　1）图片使用padding，用box的高度减去图片的高度再除以2，就是padding-top的值，这样也可以实现图片在div里居中。也可以在设置margin：0 auto时，把0改为刚才padding-top的值也可以。

　　2）img{

　　　　position:relative;

　　　　top:50%;

　　　　left:50%;

　　　　margin-top:负图片height的一半；

　　　　margin-left：负图片width的一半；

　　}

　　3）box设置display: table-cell;vertical-align: middle;                      display: table-cell 相当于是把标签元素当作一个单元格来处理。但是唯一的缺点就是IE6/7不兼容。

　　4）table的宽高自己设置

　　　　html:

　　　　<table class="img_meng_show">
　　　　　　<tr>
　　　　　　　　<td>
　　　　　　　　　　<img src="">
　　　　　　　　</td>
　　　　　　</tr>
　　　　</table>

　　　　css:　　

　　　　.img_meng_show td{
　　　　　　vertical-align: middle;
　　　　　　text-align: center;
　　　　}