1、首先先在页面里加载一张图片，代码和效果如下图所示：
2、然后设置给图片起一个class名，方便一会儿的操作。
3、然后给图片设置css样式，因为方便的原因就直接在html页面写css样式了。
4、经常使用“margin: 0 auto”来实现水平居中，而一直认为“margin: auto”是不能实现垂直居中，但是实际上，仅需要添加一些限制便能实现效果，就是通过定位：
position: absolute
top: 0
left: 0
bottom: 0
right: 0
设置定位让上下左右都为0，然后通过margin：0 auto，来让元素实现上下左右都居中。
5、设置完CSS样式之后，通过浏览查看代码的效果就可以，可以看到图片已经实现了。
6、最后给大家附上全部的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>使用CSS让图片水平垂直居中</title>
</head>
<body>
<img class="pic" src="img/timg.jpg" alt="" />
</body>
<style type="text/css">
.pic{
margin: auto
position: absolute
top: 0
left: 0
bottom: 0
right: 0
}
</style>
</html>
要是背景图片居中，需要借助于css中的background属性，background 简写属性其定义及用法如下：background 简写属性在一个声明中设置所有的背景属性。可以设置如下属性：
1，background-color 规定要使用的背景颜色。
2，background-position 规定背景图像的位置。
3，background-size 规定背景图片的尺寸。
4，background-repeat 规定如何重复背景图像。
5，background-origin 规定背景图片的定位区域。
6，background-clip 规定背景的绘制区域。
7，background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
background-image 规定要使用的背景图像。
如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('smiley.gif')也是允许的。
通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。
background-position 即是规定背景图片的位置。它的值分别有以下：
top,left,right,bottom
所以需要想背景图片居中显示的话，可以这样写：
#menu_bg{background:url(../images/index_x.jpg) center center}
css使整个页面背景图片居中,你是可以给一个总的div设置好一定的width和height，然后给它来设置背景图片，在通过margin让他们居中，同时，background的repeat来平铺实现，具体代码：
<html><head>
<style>
#div1{
width:960px
height:1200px
border:1px soild #f00
background:url('图片地址')repeat 0px 0px
margin:0 auto
}
</style>
</head>
<body>
<div id='div1'>
</div>
</body>
</html>
