title: CSS aligning to center
body: <p>I was trying to align a div to the center inside of another div. I searched, and all answers say to put "margin:auto;" or "margin: 0px auto;". I tried both, and neither will work.</p>
  
  <p>My CSS is:</p>
  
  <pre><code>#slider div
  {
      margin:0px auto;
      width:620px;
  }
  </code></pre>
  
  <p>EDIT: I've tried all that has been suggested so for, no change for anything.
  Could it be that #slider is Jquery???</p>
  
  <p>As requested, here is the entire pages code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="C:\Users\Pam\Desktop\jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"         src="C:\Users\Pam\Desktop\easyslider1.7\js\easyslider1.7.js"&gt;&lt;/script&gt;
  &lt;style type="text/css"&gt;
  body
  {
  margin-top:0px;
  margin-bottom:0px;
  margin-left:0px;
  margin-right:0px;
  background-image:url('./bg.jpg');
  }
  #headerCon
  {
  display:block;
  background-color:#151515;
  width:100%;
  height:40px;
  padding-left:auto;
  padding-right:auto;
  position:fixed;
  }
  #header
  {
  width:950px;
  height:100%;
  margin-right:auto;
  margin-left:auto;
  }
  #menu
  {
  margin-left:10%;
  }
  #title
  {
  background-image:url('./title.png');
  background-repeat:no-repeat;
  display:block;
  height:123px;
  margin:0px auto;
  text-align:center;
  }
  #container
  {
  text-align:center;
  display:block;
  width:850px;
  margin-right:auto;
  margin-left:auto;
  height:100%;
  /* background-color:#dfdfdf; */
  max-padding:100%;
  position:relative;
  }
  a.link
  {
  text-decoration:none;
  font-weight:bold;
  font-family:Arial,Helvetica,sans-serif;
  display:block;
  width:100px;
  height:30px;
  border-right:1px solid #000000;
  float:left;
  color:#00af64;
  padding-left:0px;
  padding-top:10px;
  text-align:center;
  }
  a.link:hover
  {
  text-decoration:none;
  font-weight:bold;
  font-family:Arial,Helvetica,sans-serif;
  display:block;
  width:100px;
  height:30px;
  border-right:1px solid #000000;
  float:left;
  color:#00af64;
  padding-left:0px;
  padding-top:10px;
  text-align:center;
  background-color:#252525;
  }
  p
  {
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  }
  
  #button1
  {
  margin-left:34%;
  }
  /* EASY SLIDER */
  #slider div
  {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top:2px; 
      margin-left:2px;
  width:620px;    
  }
  #sliderContain
  {
  position:absolute;
  margin-left:3px;
  margin-top:3px;
  
  }
  #slider ul, #slider li{
      margin:0;
      padding:0;
  list-style:none;
  }
  #slider, #slider li{ 
  width:620px;
  height:230px;
  overflow:hidden; 
  }
  #transBorder
  {
  background-color:#111111;
  opacity:0.60;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  display:block;
  height:236px;
  width:626;
  position:absolute;
  z-index:-1;
  float:up;
  }
  #slider1prev
  {
  display:none;
  }
  #slider1next
  {
  display:none;
  }
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="headerCon"&gt; 
  &lt;div id="header"&gt;
      &lt;div id="menu"&gt;
          &lt;a href="" id="" class="link"&gt; Home &lt;/a&gt;
          &lt;a href="" id="" class="link"&gt; Monsters &lt;/a&gt;
          &lt;a href="" id="" class="link"&gt; Areas &lt;/a&gt;
          &lt;a href="" id="" class="link"&gt; Trades&lt;/a&gt;
          &lt;a href="" id="" class="link"&gt; Classes &lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;/div&gt;
  &lt;div id="container"&gt;
  &lt;div id="title"&gt; &amp;nbsp; &lt;/div&gt;
  &lt;div id="sliderContain"&gt;
  &lt;div id="slider"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;img src="./reddragon.png"/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="./swamp.png"/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="./town.png"/&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="transBorder"&gt;
  &amp;nbsp;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){   
  $("#slider").easySlider({
      auto: true,
      continuous: true,
      nextId: "slider1next",
      prevId: "slider1prev"
  });
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>