第一种写法：使用背景图片的方法让图片水平垂直居中
Html代码内容：
Css代码内容：.div_img{
width: 720px;
height: 160px;
border: 1px dashed #666;
background: url(pic_name.jpg) no-repeat center center;
}
实现效果如下：
第二种写法：通过设置图片父级元素P的line-height属性来让图片水平垂直居中
Html代码内容：
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代码内容：
Css代码内容：.div_img{
width: 720px;
height: 160px;
border: 1px dashed #ccc;
display: table-cell; //主要是这个属性
vertical-align: middle;
text-align: center;
}
实现效果如下：
本文地址：https://www.up7.com.cn/news/248.html