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>
1，可以用弹性容器来实现居中。2，用<p align="centger"><img src="###"></p>来实现居中。
3，容器和图片都设置宽度高度，已经知道宽度高度情况下，用margin-top,margin-left等方式来设置居中。
3，用相对定位方式实现居中。margin:0 auto
4,对容器设置text-align:center方式来实现居中。
最简单的方法：给图片单独套个div，给div做margin设置就好了，设置用百分比，具体如下
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>图片居正中间__郭凯旗</title>
<style>
html{height:100% width:100%}
body{height:100% width:100%}
.d1{width:300px
height:200px
background:red
position:fixed
top:50%
margin-top:-100px
left:50%
margin-left:-150px
}
.d1 img{width:100%height:100%}
</style>
</head>
<body>
<div class="d1">
<img src="1.jpg"/>
</div>
</body>
</html>
<!--至于大小自己调节到合适的就好了-->
效果图如下：
