CSS怎么让图片居中？如何让图片居中显示

众所周知，HTML 和 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 让图片居中的详细方法，想要学习更多 CSS 相关教程可点击：CSS微课、HTML+CSS基础实战