本篇内容主要讲解“CSS如何让图片居中显示”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS如何让图片居中显示”吧!
一、display:table-cell
HTML 代码如下：
<div class="img_wrap"> <img src="../images/w3cschool.png"></div>CSS 代码如下
.img_wrap{ width:700px; height:350px; border:1px dashed #ccc; display: table-cell; vertical-align: middle; text-align: center; }二、采用背景法
html 代码：
<div class="img_wrap"></div>CSS 代码：
.img_wrap{ width:700px; height:350px; border:1px dashed #ccc; background: url("../images/w3cschool.png") no-repeat center center; }三、line-height
此方法是在图片外用 p 标签，通过设置 line-height 使图片垂直居中：
HTML 代码：
<div class="img_wrap"> <p><img src="../images/ss.png" alt=""></p></div>CSS 代码：
.img_wrap{ width:700px; height:350px; border:1px dashed #ccc; text-align: center;}.img_wrap p{ width: 700px; height:350px; line-height: 350px;}.img_wrap p img{ vertical-align: middle;}到此，相信大家对“CSS如何让图片居中显示”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
