滑块内容与媒体查询

Question

我正在尝试创建滑块响应。将使用Roundabout滑块，实际上Roundabout响应但它不适合我，所以我决定创建自定义媒体查询。当屏幕尺寸小于1199px宽度时，问题是.rd-slider未显示在屏幕中间。如何在屏幕上放置.rd-slider课程中间位置？这是我的CSS

    #warper {
    border: 0 none;
    height: auto;
    position: relative;
    width: auto;
}
.roundabout-holder {
    height: 30em;
    list-style: none outside none;
    margin: 0 auto;
    padding: 0;
}
.roundabout-moveable-item {
    background-color: #CCCCCC;
    border: 1px solid #999999;
    cursor: pointer;
    height: 300px;
    width: 450px;
}
.roundabout-in-focus {
    cursor: auto;
}
.rd-slider {
    width: auto;
}
.rslide {
    margin: 0 auto;
    width: 400px;
}
@media (min-width: 768px) and (max-width: 1199px) {
.warper {
    background: none repeat scroll 0 0 #0000FF;
    border: 0 none;
    height: auto;
    padding: 0;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.rd-slider {
    background: none repeat scroll 0 0 #FF0000;
    margin: 0 auto;
    padding-top: 50px;
    width: auto;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.rslide {
    float: left;
    margin: 0 auto;
    width: 300px;
}
}

和HTML

        <div id="warper">
        <div class="rd-slider">
            <ul class="rslide">
                <li><a href="#"><img src="#"></a></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>