1、首先打开前端开发工具，新建一个html代码页面。
2、在html代码页面上创建一个用于设置背景颜色的div标签，然后给这个标签添加上class = "bg-img"。
3、设置背景图片。创建style标签，然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。
4、保存html代码，使用浏览器打开，这个时候会发现浏览器上的背景图片显示在左上角。
5、回到html代码页面，在bg-img类里添加background-position: center的属性。
6、保存html代码后重新刷新浏览器，这个时候会发现浏览器上的背景图片已经自动居中了。
二楼说的甚是我来帮你完整解决一下残留的问题吧
两种解决方法
先说原因吧，原因就是LOGO是通过背景图片导入的
#header {
background:url("../../templates/teakiagy/images/logo.jpg") no-repeat scroll 100px 50% transparent
height:100px
margin-bottom:0
overflow:hidden
}
#header {
background:none repeat scroll 0 0 #373A3C
border-bottom:0 solid #373A3C
margin-bottom:8px
min-width:980px
width:100%
而怪就怪在你有两份儿#header。宽度是执行的第二个width:100%,而不是980px，就不会随着下面的内容一起居中。
所以，解决方法就是
一，更改为width:980px
二，重新写hmtl中logo的代码，你可以写一个<span class="logo">logo</span>，CSS代码 .logo{display:block背景图片地址指向logo，宽度，高度大小与logo一致,}
显然第一种方法简单……
加油
