div+css实现背景图片居中
有时需要在网页中设置一张超大背景图，但考虑到屏幕分辨率的不同，需要做到在各分辨率下能够自动居中并拉升显示。
首先定义一个自动居中，宽度为960px的div层，以这个层为基准来进行偏移控制背景图居中显示。实现div水平居中于浏览器中需要一个条件和一个设置。
一条件：
对body设置居中样式text-align:center，否则在IE中默认以向左对齐。
[php]
body{text-align:center}
[/php]
一设置：
对div层设置居中样式margin:0 auto，表示上下外边距为0，左右边距随浏览器自动，若不设置则在chrome中以向左对齐。
[php]
<div style="width: 960px; margin:0 auto; />
[/php]
这样就可以将div居中显示，并且在其它分辨率下也能居中。
完整代码如下：
[php]
<html>
<body style="text-align:center;">
<div style="width: 960px; margin:0 auto; background-color: #000000;">
</div>
</body>
</html>
[/php]
然后就是添加背景图片了，在之前设置好居中的div中再加一个div，这个div负责控制背景图片的起始位置，若背景图片为1920px，则需要向左偏移(1920-960)/2个像素实现居中，并且需要设置position:relative，否则在IE中只会显示960px的内容，代码如下：
[php]
<div style="position:relative; height: 5782px; margin: 0px -480px;" />
[/php]
添加背景图片
[php]
<div style="background: url(test.jpg) no-repeat center 0px; height: 5782px;" />
[/php]
此时预览会发现有水平滚动条，需要给body加上overflow-x:hidden即可去掉水平滚动条。
若要在背景图层上加其它图片，可以使用position:relative并且设置偏移来显示
[php]
<div style="position: relative; margin: 0px 480px; width: 960px;">
<img height="168" width="960" src="a.jpg">
<img height="316" width="958" src="b.jpg">
<img height="553" width="958" src="c.jpg">
</div>
[/php]
加上背景图片的完整代码如下：
[php]
<html>
<body style="text-align:center; overflow-x:hidden;">
<div style="width: 960px; margin:0 auto; background-color: #000000;">
<div style="position:relative; height: 5782px; margin: 0px -480px;">
<div style="background: url(test.jpg) no-repeat center 0px; height: 5782px;">
<div style="position: relative; margin: 0px 480px; width: 960px;">
<img height="168" width="960" src="a.jpg">
<img height="168" width="960" src="b.jpg">
<img height="168" width="960" src="c.jpg">
</div>
</div>
</div>
</div>
</body>
</html>
[/php]
