How do I center this CSS?

Here is the CSS -

#slider ul, #slider li,
#slider2 ul, #slider2 li{
    margin:0;
    padding:0;
    list-style:none;

    }
#slider2{margin-top:1em;}
#slider li, #slider2 li{ 
    /* 
        define width and height of list item (slide)
        entire slider area will adjust according to the parameters provided here
    */ 
    width:500px;
    height:250px;
    overflow:hidden;

    }   
#prevBtn, #nextBtn,
#slider1next, #slider1prev{ 
    display:block;
    width:30px;
    height:77px;
    position:absolute;
    left:-30px;
    top:71px;
    z-index:1000;

    }   
#nextBtn, #slider1next{ 
    left:696px;
    }                                                       
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{  
    display:block;
    position:relative;
    width:30px;
    height:77px;
    background:url(../images/btn_prev.gif) no-repeat 0 0;   
    }   
#nextBtn a, #slider1next a{ 
    background:url(../images/btn_next.gif) no-repeat 0 0;   
    }   

/* numeric controls */  

#slider img{
width:500px;
height:300px;

}

ol#controls{
    margin:1em 0;
    padding:0;开发者_JAVA百科
    height:28px;    
    }
ol#controls li{
    margin:0 10px 0 0; 
    padding:0;
    float:left;
    list-style:none;
    height:28px;
    line-height:28px;
    }
ol#controls li a{
    float:left;
    height:28px;
    line-height:28px;
    border:1px solid #ccc;
    background:#b32d45;
    color:white;
    padding:0 10px;
    text-decoration:none;
    }
ol#controls li.current a{
    background:#5DC9E1;
    color:#fff;
    }
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

I want to center the #slider

HTML

<div id="slider">
<ul>
<li>IMAGE</li>
<li>IMAGE2</li>
</ul>
</div>

There are two main ways to do this:

1. Center the text of #slider's parent using text-align: center.
2. If the slider is the only element in that same horizontal positioning, you can use centering margins on the slider: #slider { margin: 0px auto; }

#slider has a defined width, therefore if you set the left and right margin of it to auto, it will be centralised. The descendent selector 'img' is not needed as you're using it as a container for a list of images anyway. Unless you wish for every image to be centred within the slider id?

#slider
{
   margin:0px auto;
   width:500px;
   height:300px;
}

All the talk of jQuery is unnecessary when it can be easily accomplished with one simple line of css.