title: Loading gif align in the center of the page
body: <p>I am trying to make a loading gif to be on the center of the page also in mobiles.
  Have tried </p>
  
  <pre><code>margin: 0 auto;
  </code></pre>
  
  <p>but i had no luck.</p>
  
  <pre><code>#bw-preloader, #bw-preloader:after {
  
      background:url(http://i.imgur.com/ImksiyD.gif) !important;
      background-repeat: no-repeat !important;
      border-radius: 0% !important;
      width: 256px !important;
      height: 256px !important;
      position: fixed !important;
      top: 50% !important;
      left: 50% !important;
      margin: -50px 0px 0px -50px; !important;
  }
  
  #bw-preloader {
  border: 0px !important;
  -webkit-transition: opacity 10s !important;
  
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  margin: -50px 0px 0px -50px; !important;
  }
  
  @media only screen and (max-width: 500px) {
  #bw-preloader {
  
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  margin: -50px 0px 0px -50px; !important;
  }
  }
  </code></pre>
  
  <p>You can see it live  <a href="http://www.tfeditor.com" rel="nofollow">here</a></p>
  
  <p>Could someone check it out if im missing something?</p>
  
  <p>Also have tried </p>
  
  <pre><code>position: absolute;
  </code></pre>