title: Center <div> vertically and horizontally problems
body: <p>I am trying to center the divs with the class <code>spinner</code>, they are all within <code>&lt;li&gt;</code> tags.</p>
  
  <p>The divs I am trying to center contain animated loaders using spin.js. </p>
  
  <p>I can not seem to get the style <code>top: -50%</code> to work correctly, but if I use firebug and remove the style and add it again it seems to work.</p>
  
  <p>Hopefully some one can see were I am going wrong.</p>
  
  <p><strong>EDITED</strong></p>
  
  <p>Flexslider will create the divs that need centering. </p>
  
  <p>Below is a working example.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
          &lt;meta content="charset=utf-8"&gt;
          &lt;title&gt;Gallery&lt;/title&gt;
          &lt;link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css" type="text/css" media="screen" /&gt;
  
          &lt;style type="text/css"&gt;
              body {
                      background-color: #222222;
                      margin-top: 20px;
                      margin-bottom: 20px;
              }
              .copyright {
                      font-family: Arial, Helvetica, sans-serif;
                      font-size: 12px;
                      color: #999;
              }
              a {
                      font-size: 12px;
                      color: #999;
              }
  
              .flexslider .slides il {
                      margin-right: 10px;
              }
  
              #gallery_wrap {
                      margin-left: auto; 
                      margin-right: auto; 
                      width: 713px;
              }
  
              #slider, #carousel {
                      background-color: #000000; 
                      border: 4px solid #000000;                  
              }
  
              #slider {
                      margin-bottom: 10px;
              }
  
              #slideshow_controls {
                      margin-left: 5px;
                      margin-bottom: 5px;
              }
  
              #carousel img {
                  height: 70px;
              }
  
              #slider img {
                  max-width: 713px;
                  max-height: 550px;
  
              }
  
              #carousel_wrap {
                      width: 713px;
              }
  
              #carousel .slides &gt; li {
                  margin-right: 5px;
                  cursor: pointer;
              }
  
              #slideshow_controls img {
                      width: 40px;
                      height: 40px;
                      cursor: pointer;
              }
  
              .spinner {
                  position: fixed;
                  top: -50%;
                  left: 50%;
              }
          &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="gallery_wrap"&gt;
      &lt;div id="slider" class="flexslider"&gt;
          &lt;ul class="slides"&gt;
            &lt;li&gt;
              &lt;img src="http://ichef.bbci.co.uk/naturelibrary/images/ic/credit/640x395/l/la/lake/lake_1.jpg" /&gt;
            &lt;/li&gt;
  
            &lt;li&gt;
              &lt;img src="http://aspiringbackpacker.com/wp-content/uploads/2012/10/plitvice1.jpg" /&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
  
        &lt;div id="slideshow_controls"&gt;&lt;img title="Play slide show" src="./images/play_white_btn.png" /&gt;&lt;/div&gt;
  
          &lt;div id="carousel_wrap"&gt;
        &lt;div id="carousel" class="flexslider"&gt;
          &lt;ul class="slides"&gt;
            &lt;li&gt;
              &lt;img src="http://ichef.bbci.co.uk/naturelibrary/images/ic/credit/640x395/l/la/lake/lake_1.jpg" /&gt;
            &lt;/li&gt;
  
            &lt;li&gt;
              &lt;img src="http://aspiringbackpacker.com/wp-content/uploads/2012/10/plitvice1.jpg" /&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
    &lt;!-- jQuery --&gt;
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  
    &lt;!-- FlexSlider --&gt;
    &lt;script defer src="http://flexslider.woothemes.com/js/jquery.flexslider.js"&gt;&lt;/script&gt;
  
    &lt;!-- Spin.js --&gt;
    &lt;script src="http://fgnass.github.io/spin.js/dist/spin.js"&gt;&lt;/script&gt;
    &lt;!--&lt;script src="http://fgnass.github.io/spin.js/jquery.spin.js"&gt;&lt;/script&gt;--&gt;
  
  
    &lt;script type="text/javascript"&gt;
  
      $(window).load(function(){
  
          var opts = {
                      lines: 11, // The number of lines to draw
                      length: 20, // The length of each line
                      width: 10, // The line thickness
                      radius: 18, // The radius of the inner circle
                      corners: 1, // Corner roundness (0..1)
                      rotate: 0, // The rotation offset
                      direction: 1, // 1: clockwise, -1: counterclockwise
                      color: '#FFF', // #rgb or #rrggbb
                      speed: 1, // Rounds per second
                      trail: 60, // Afterglow percentage
                      shadow: false, // Whether to render a shadow
                      hwaccel: false, // Whether to use hardware acceleration
                      className: 'spinner', // The CSS class to assign to the spinner
                      zIndex: 2e9, // The z-index (defaults to 2000000000)
                      top: '100', // Top position relative to parent in px
                      left: 'auto' // Left position relative to parent in px
              };
  
              var spinner = new Spinner(opts).spin();
              $('#slider li').append(spinner.el);
  
        var opts2 = {
              lines: 11, // The number of lines to draw
              length: 10, // The length of each line
              width: 5, // The line thickness
              radius: 10, // The radius of the inner circle
              corners: 1, // Corner roundness (0..1)
              rotate: 0, // The rotation offset
              direction: 1, // 1: clockwise, -1: counterclockwise
              color: '#FFF', // #rgb or #rrggbb
              speed: 1, // Rounds per second
              trail: 60, // Afterglow percentage
              shadow: false, // Whether to render a shadow
              hwaccel: false, // Whether to use hardware acceleration
              className: 'spinner', // The CSS class to assign to the spinner
              zIndex: 2e9, // The z-index (defaults to 2000000000)
              top: 'auto', // Top position relative to parent in px
              left: 'auto' // Left position relative to parent in px
        };
  
        var spinner2 = new Spinner(opts2).spin();
        $('#carousel li').append(spinner2.el);
  
        $('#carousel').flexslider(
        {
              animation: "slide",
              controlNav: false,
              animationLoop: false,
              slideshow: false,
              itemWidth: 114,
              itemMargin: 5,
              asNavFor: '#slider'
        });
  
        $('#slider').flexslider(
        {
              animation: "slide",
              controlNav: false,
              animationLoop: false,
              slideshow: false,
              sync: "#carousel"
        });
  
      });
  
    &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help would be great.</p>