title: How do I horizontally center my css slideshow
body: <p>I have used jsfiddle for the file. The slideshow is at the bottom. I am trying to have it centered, but thus far it stays at the left margin.
  The end results are here: <a href="https://jsfiddle.net/n6kae2rn/" rel="nofollow">https://jsfiddle.net/n6kae2rn/</a>
   <a href="https://jsfiddle.net/n6kae2rn/embedded/result/" rel="nofollow">https://jsfiddle.net/n6kae2rn/embedded/result/</a></p>
  
  <pre><code>.css-slideshow {
      text-align:center;
      position: relative;
      max-width: 410px;
      height: 730px;
  }
  .css-slideshow figure {
      margin: 0;
      position: absolute;
  }
  .css-slideshow figcaption {
      position: absolute;
      top: 0;
      color: #fff;
      background: rgba(0, 0, 0, .3);
      font-size: .8em;
      padding: 8px 12px;
      opacity: 0;
      transition: opacity .5s;
  }
  .css-slideshow:hover figure figcaption {
      transition: opacity .5s;
      opacity: 1;
  }
  .css-slideshow figure {
      opacity:0;
  }
  figure:nth-child(1) {
      animation: xfade 42s 32s infinite;
  }
  figure:nth-child(2) {
      animation: xfade 48s 24s infinite;
  }
  figure:nth-child(3) {
      animation: xfade 48s 16s infinite;
  }
  figure:nth-child(4) {
      animation: xfade 48s 8s infinite;
  }
  figure:nth-child(5) {
      animation: xfade 48s 0s infinite;
  }
  @keyframes xfade {
      0% {
          opacity: 1;
      }
      10.5% {
          opacity:1;
      }
      20% {
          opacity: 0;
      }
      98% {
          opacity:0;
      }
      100% {
          opacity:1;
      }
  }
  div.poster {
      background: url(http://jillun.com/dp-intsmall.jpg) repeat;
      padding: 25px;
  }
  </code></pre>