css使图片水平垂直居中

1.利用display:table-cell，具体代码如下：

html代码如下：

 <div class="img_wrap">

 　　<img src="wgs.jpg">

 </div>

css代码如下：

1 .img_wrap{

2     width: 400px;

3     height: 300px;

4     border: 1px dashed #ccc;

5     display: table-cell; //主要是这个属性

6     vertical-align: middle;

7     text-align: center;

8

 }

效果如下：

2.采用背景法：

html代码如下：

<div class="img_wrap"></div>

css代码如下：

复制代码

.img_wrap{

    width: 400px;

    height: 300px;

    border: 1px dashed #ccc;

    background: url(wgs.jpg) no-repeat center center;

}

效果如下图：

3.图片外面用个p标签，通过设置line-height使图片垂直居中：

html代码如下：

 <div class="img_wrap">

     <p><img src="wgs.jpg"></p>

 </div>

css代码如下：

*{margin: 0px;padding: 0px}

.img_wrap{

    width: 400px;

    height: 300px;

    border: 1px dashed #ccc;

    text-align: center;}

.img_wrap p{

    width:400px;

    height:300px;

    line-height:300px;  /* 行高等于高度 */

}

.img_wrap p img{

    *margin-top:expression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */

    vertical-align:middle;

    border:1px solid #ccc;

}

效果图如下：