html怎么把页面和图片居中,css怎么让图片居中？

在前端页面的开发中，图片的显示方法有两种，分别为：img标签显示图片，background属性设置为背景图片显示。那么我们如何使用css设置图片居中呢？

css设置背景图片居中：

1、设置背景图片居中：

css中的background-position属性就可以实现背景图片的水平和垂直方向居中对齐，下面我们通过简单的代码示例来介绍background-position属性是如何设置背景图片居中显示的。

我们先使用background属性显示背景图片：

背景图片居中

*{margin: 0;padding:0;}

.demo{

width: 400px;

height: 300px;

margin: 50px auto;

border: 1px dashed #000;

background-image:url(1.jpg) ;

background-size:200px 160px ;

background-repeat:no-repeat ;

}

效果图：

1、background-position使用像素设置背景图片居中(知道背景图片的大小)background-position:100px 70px ; /*宽的一半，高的一半*/

效果图：

2、background-position使用50%设置背景图片居中，很方便background-position:50% 50% ;

3、background-position使用center设置背景图片居中，很方便。(第2个center可以省略)background-position:center center;

上述background-position的三种设置方法都可以实现背景图片的居中，background-position属性的第一个值设置水平位置，第二个值设置垂直位置。

2、利用display:table-cell来实现img标签图片的水平和垂直居中

img图片居中

.demo{

width: 400px;

height: 300px;

border: 1px dashed #000;

display: table-cell; /*主要是这个属性*/

vertical-align: middle;

text-align: center;

}

.demo img{

width: 200px;

height: 150px;

}

效果图：