第一种写法：使用背景图片的方法让图片水平垂直居中
Html代码内容：

<div class="div_img" style="background-color:#ccc;"></div>

Css代码内容：

.div_img{
    width: 720px;
    height: 160px;
    border: 1px dashed #666;
    background: url(pic_name.jpg) no-repeat center center;
}

实现效果如下：

第二种写法：通过设置图片父级元素P的line-height属性来让图片水平垂直居中
Html代码内容：

<div class="div_img">
    <p><img src="pic_name.jpg"></p>
</div>

Css代码内容：

*{margin: 0px;padding: 0px}
.div_img{
    width: 720px;
    height: 160px;
    border: 1px dashed #666;
    text-align: center;
}
.div_img p{
    width:800px;
    height:300px;
    line-height:300px;  /* 行高等于高度 */
    background-color:#ccc;
}
.div_img p img{
    *margin-top:expression((800 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */
    vertical-align:middle;
    border:1px solid #ccc;
}

实现效果如下：

第三种写法：使用CSS样式的display:table-cell;属性让图片水平垂直居中
Html代码内容：

<div class="div_img">
    <p><img src="pic_name.jpg"></p>
</div>

Css代码内容：

.div_img{
    width: 720px;
    height: 160px;
    border: 1px dashed #ccc;
    display: table-cell; //主要是这个属性
    vertical-align: middle;
    text-align: center;
}

实现效果如下：

站内文章：均为188bet博彩体育app下载方式 各部门原创内容如需转载请著名本文网站链接：//www.mcissock.com/new/24625.html未经允许转载要受法律责任,如需转载请联系269247937@qq.com

[让图片水平垂直居中的三种CSS写法]