先看下我们的html代码，在一个div里放入一个img图片标签。
02再看下我们div的样式，主要地方是我们设置了div的宽度，为400px，如图所示的代码。
03现在看下页面，可以看到，现在的图片是靠左显示的，并没居中。
04要让img标签的图片居中，我们可以加上一行样式代码：text-align: center就行了。
05再次看下页面，可以看到现在的图片已经是居中显示的了。
既然做背景能实现为什么不当做背景而直接插入img呢？当然用img也是可以的实现的
1.
首先img的宽度必须是已知的（比如1920px）；
2.
设置外部容器overflow:hidden（多余部分隐藏）；
3.
设置外部容器position:relative（必须）
4.
设置img样式position:absolute
left:50%
margin-left
:-960px（这个数值为img宽度的一半）
5.
注：left:50%是将图片向右移动到容器一半的距离，margin-left:-960px是再将图片反向移动图片一半的距离，这样图片就在居中了，你可以不用理解这是什么意思，会用就行了。
1、第一种css代码如图所示。display设置成table-cell，text-align为center，垂直居中设置vertical-align为middle。
2、打开浏览器查看结果，图片已处于正中状态。
3、第二种方法css代码如图。div设置成相对定位，img设置成绝对定位，然后left:50%，top:50%，此时图片的左上角将位于div的中心。重点：图片向上移动图片高度的一半，并向左移动图片宽度的一半。正好为与div正中间。
4、在浏览器查看结果，图片水平，垂直均居中。
