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>
盒子居中是相对于父元素来说的，因此我们让盒子居中时，往往采用嵌套的方式，让父盒子套着子盒子 。在父子盒子嵌套下，让子盒子居中的方式：
第一种方法：position， 使用定位，子绝父相，再left:50%，margin-left:负的盒子宽度的一半，这是最常用的方法
第二种方法：flex，弹性布局，让子盒子居中，但是样式要写在父盒子中，display:flex,just-content:center
第三种方法：在position基础上，把margin-left换成CSS3中的transform：translate(-50px)
第四种方法：在position的基础上，只保留子绝父相，然后在子盒子中加上margin:auto、left:0、right:0；
.corpmenu {CLEAR: both background-color:#32648f WIDTH: auto HEIGHT: 45px RIGHT:auto
text-align: center
}
.corpmenu UL {
PADDING-RIGHT: auto PADDING-LEFT: auto PADDING-BOTTOM: 100px MARGIN: 0px 0px 0px 0px PADDING-TOP: 0px LIST-STYLE-TYPE: none
text-align: center
}
.corpmenu LI {
BACKGROUND: url(GSMenuRight.gif) no-repeat right 50%
display: inline-block
}
你试试，我是按照
<div class=corpmenu>
<ul ><li>标题</li><li>标题</li><li>标题</li></ul></div>
