title: How can i center the slideshow in my website to be in the center of the screen?
body: <p>I have this css style code:</p>
  
  <pre><code>/* null margins and padding to give good cross-browser baseline */
  html,body,address,blockquote,div,
  form,fieldset,caption,
  h1,h2,h3,h4,h5,h6,
  hr,ul,li,ol,ul,dd,dt,dl,
  table,tr,td,th,p,img {
      margin:0;
      padding:0;
  }
  
  img,fieldset {
      border:none;
  }
  
  hr {
      display:none;
      /*
          HR in my code are for semantic breaks in topic/section, NOT
          style/presenation, so hide them from screen.css users
      */
  }
  
  @media (max-width:600px) {
      * {
          -webkit-text-size-adjust:none;
          -moz-text-size-adjust:none;
          -ms-text-size-adjust:none;
      }
  }
  
  body {
          font:normal 85%/150% "segoe ui",helvetica,sans-serif;
          background-image: url("CB1.html");
          //position:fixed; //(relative, absolute, static*) 
          //top: 120px; 
          //left: 120px;
          //bottom: 120px;
          width: 960px; margin: 0 auto;
  }
  
  .ss_scripted img {
      display:none;
  }
  
  .ss_scripted .ss_show {
      display: block;            
  }
  
  #slideShow img {
      margin:0 auto;
  }
  
  #slideCounter {
      text-align:center;
      padding:0.25em 1em;
      font:bold 200%/120% consolas,courier,monospace;
      color:#C00;
  }
  
  #slideControls {
      width:512px;
      padding:0.5em 0;
      margin:0 auto;
  }
  
  #slideControls a {
      float:left;
      padding:0.25em 0.6em;
      text-decoration:none;
      color:#000;
      background:#EEE;
      border:2px solid #666;
      -webkit-border-radius:1em;
      -moz-border-radius:1em;
      border-radius:1em;
      -webkit-box-shadow:
          inset 0 -0.5em 1em rgba(0,0,0,0.3),
          0 0 1px #000;
      -moz-box-shadow:
          inset 0 -0.5em 1em rgba(0,0,0,0.3),
          0 0 1px #000;
      box-shadow:
          inset 0 -0.5em 1em rgba(0,0,0,0.3),
          0 0 1px #000;
  }
  
  #slideControls a:active,
  #slideControls a:focus,
  #slideControls a:hover {
      background:#FFF;
  }
  
  #slideControls .next {
      float:right;
  }
  </code></pre>
  
  <p>I changed the part in the body:</p>
  
  <pre><code>body {
          font:normal 85%/150% "segoe ui",helvetica,sans-serif;
          background-image: url("CB1.html");
          //position:fixed; //(relative, absolute, static*) 
          //top: 120px; 
          //left: 120px;
          //bottom: 120px;
          width: 960px; margin: 0 auto;
  }
  </code></pre>
  
  <p>Unmarked 3 lines and added the width and margin 0 auto
  If i was using this 3 lines without the width and margin then the slideshow was displaying in the left bottom.</p>
  
  <p>Now the slideshow is displaying in the middle top. But i want it to be in the screen center not middle top:</p>
  
  <p><a href="http://postimg.org/image/ominayj15/" rel="nofollow">Middle Top</a></p>
  
  <p>What should i change/add ?</p>