在html如何让图片居中 css,CSS怎么让图片居中？如何让图片居中显示

众所周知，HTML 和 CSS 结合后功能强大，可以做出千变万化的样式，那么你知道如何用 CSS 让图片居中显示吗？本篇文章告诉你

一、display:table-cell

HTML 代码如下：

CSS 代码如下.img_wrap{

width:700px;

height:350px;

border:1px dashed #ccc;

display: table-cell;

vertical-align: middle;

text-align: center;

}

效果图：

二、采用背景法

html 代码：

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 代码：

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基础实战