1、首先需要新建一个HTML页面。
2、然后输入页面的标题，可以按照下方图中的进行设置。
3、然后在根据下方图片中的代码进行编辑，
4、在两个div的class 中添加相同的控制图片的class名为了 ”img“，并为div添加控制宽度的样式。
5、在两个div中加入相同的图片<img src="images/5.png" />，在浏览器打开页面发现加入图片后把原来的div都给覆盖掉了。
6、然后在输入命令.img img{ width:100%height:auto}，这样就完成了。
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>
<html><head>
<meta http-equiv="content-type" content="text/html charset=UTF-8" />
<title>测试</title>
</head>
<body>
<style>
div{margin-bottom:20px}
</style>
<div style="width:100pxheight:100pxoverflow:hiddenbackground:url(http://img.baidu.com/img/iknow/r/image/2014-01-03/297d706b130942bca4e0d5bbb96cd8aa.png?t=1388712210)">
</div>
<div style="width:100pxheight:100pxbackground:url(http://img.baidu.com/img/iknow/r/image/2014-01-03/297d706b130942bca4e0d5bbb96cd8aa.png?t=1388712210)background-size:100px"></div>
<div style="width:100pxheight:100pxoverflow:hidden"><img src="http://img.baidu.com/img/iknow/r/image/2014-01-03/297d706b130942bca4e0d5bbb96cd8aa.png?t=1388712210"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
function getHeight() {
var h = $("img").outerHeight() //取图片高度
var w = $("img").outerWidth() //取图片宽度
if (h > w){ //判断一下，如果高度大过宽度，就设置宽度为100，高度多出来的，会被DIV的overflow:hidden裁剪掉，反之，宽度比较大就设置高度为100，宽度多出来的会被裁剪。
$("img").width(100)
}
else{
$("img").height(100)
}
}
window.onload = function() {
getHeight()
}
</script>
</body>
</html>
用了三种方法，你自己看一下吧。
第三种方法，你可以搜搜资料，看看有没有JQUERY获取背景大小，然后再设置小的为固定，然后，多出来裁切掉，这样的话，就可以在背景样式中加上center显示图片中间。
