title: CSS: Center Image on top of div that acts as Background
body: <p>I don't know why this image won't center. I need it to be centered at the exact center and this should work if screen is resized (I'm using bootstrap 4).</p>
  
  <p><strong>html:</strong></p>
  
  <pre><code>&lt;div id="general-container" class="general-container preloader"&gt;
  
          &lt;img src=""&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css:</strong></p>
  
  <pre><code>    .preloader {
  
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000;
      transition: 1s;
      z-index: 9999;
      opacity: .8;
  }
  
  #general-container {
      background-image: url("/static/img/logo.png");
      background-repeat: no-repeat;
      display: block;
      margin-left: auto;
      margin-right: auto;
      position: absolute;
  
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/NdRZj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NdRZj.png" alt="enter image description here"></a></p>
  
  <p>Project Structure:</p>
  
  <pre><code>-llama-stickers
   |_cart
     |_templates
       |_cart.html
   |_llama-stickers
   |_order
   |_search_app
   |_shop
     |_templates
       |_base.html
   |_static
     |_css
       |_preloader.css
     |_img
       |_logo.png
  </code></pre>