1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：span {position: absolutetop: 45pxleft: 180px}。
3、浏览器运行index.html页面，此时成功通过css设置了文字在图片上面居中显示。
将banner外面加个DIV，调用样式类nav，然后设置banner为1000像素宽，nav的设置自动：
【CSS部分】
<style>
.nav{width:autoheight:30pxbackground:url(img/bg.jpg) center center no-repeat}即可。
横幅广告，一个表现商家广告内容的图片，放置在广告商的页面上，是互联网广告中最基本的广告形式，尺寸是宽度满屏*500到700像素的高度，一般是使用GIF格式的图像文件，可以使用静态图形，也可用多帧图像拼接为动画图像。除普通GIF格式外，新兴的Rich Media Banner（丰富媒体Banner）能赋予Banner更强的表现力和交互内容。
Internet Advertising Bureau (IAB，国际广告局)的"标准和管理委员会"联合Coalition for Advertising Supported Informatiln and Entertainment(CASIE，广告支持信息和娱乐联合会)联合推出了一系列网络广告宣传物的标准尺寸。这些尺寸作为建议，提供给广告生产者和消费者，使大家都能接受。截止至2014年4月15日网站上的广告几乎都遵循IAB/CASIE标准。
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>
