Jquery 横幅滑块未在html中居中

我在我的页面中添加了一个jQuery响应滑块，而不是在页面中居中，而是将滑块移到页面的右侧..我尝试了CSS中的所有方法以使其居中，但我做不到。我在这里找不到我做错了什么，有人能指出错误吗

这是我的密码

<div class="banner">

        <div class="slider">
            <ul>
                <li> <a href="#"> <img src="graphics/top.jpg" width="990" height="520"> </a> </li>
                <li> <a href="#"> <img src="graphics/top.jpg" width="990" height="520"> </a> </li>
            </ul>
            <div class="dots">
                <a href="javascript:void(0);" rel="0" class="cur"></a>
                <a href="javascript:void(0);" rel="1"></a>
                <a href="javascript:void(0);" rel="2"></a>
                <a href="javascript:void(0);" rel="3"></a>
            </div>
            <div class="arrow">
            <a href="javascript:void(0);" class="btn-left">&lt;</a>
            <a href="javascript:void(0);" class="btn-right">&gt;</a>
            </div>
        </div>
    </div>

---

您需要添加

.banner{位置：绝对；左边距：-495px；左边距：50%；宽度：990px；}

并删除

.banner.slider ul li{左边距：50%；}

这应该是它的中心

.banner { margin-bottom: 20px; z-index: 1; }
.banner .slider { position: relative; width: 990px; }
.banner .slider ul { margin: 0; padding: 0; list-style: none; width: 100%; height: 520px; position: relative;}
.banner .slider ul li { position: absolute; top: 0; left: 50%; }
.banner .slider .dots:after { display: table; clear: both; content: ""; }
.banner .slider .dots { position: absolute; bottom: 20px; left: 60%; z-index: 40; *zoom: 1; }
.banner .slider .dots a { display: block; float: left; width: 12px; height: 12px; margin-right: 10px; text-indent: -9999em; background: #000; border-radius: 10px; }
.banner .slider .dots .cur { background: #329; }
.banner .slider .arrow { width: 65%; position: absolute; top: 45%; left: 18%; z-index: 50; }
.banner .slider .arrow a { font-family: "Microsoft YaHei"; font-size: 34px; font-weight: 700; color: #fff; }
.banner .slider .arrow .btn-left { float: left; }
.banner .slider .arrow .btn-right { float: right; }