title: Center spinner in viewport on bootstrap overlay
body: <p>I'm using the bootstrap-vue overlay on a page that has long content scrolled via the browser window.</p>
  
  <pre><code>&lt;b-overlay :show="loading"&gt;
  </code></pre>
  
  <p>The overlay correctly covers all of the content, even the part below the viewport, but the overlay's built-in spinner is centered on the content rather than the viewport, so the spinner ends up near or below the bottom of the viewport when the content is long enough.</p>
  
  <p>I've tried custom content via a slot, like this...</p>
  
  <pre><code>&lt;b-overlay :show="loading"&gt;
    &lt;template v-slot:overlay&gt;
      &lt;div style="???" class="text-center"&gt;
        &lt;p style="???"&gt;Make me a spinner and center me on the viewport&lt;/p&gt;
        &lt;b-button
      &lt;/div&gt;
    &lt;/template&gt;
  </code></pre>
  
  <p>...with dozens of ideas for <code>style="???"</code>, including <code>position:absolute</code> with different tops, including <code>top=50vh</code>, including <code>!important</code> strewn around, etc., but the content doesn't budge.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Note that this snippet doesn't run, because I don't see a way to get
  // bootstrap-vue via CDN
  var app = new Vue({
    el: '#app',
    data: function() {
      return {
        message: 'Hello Vue!',
        messages: []
      }
    },
    mounted() {
      for (let i=0; i&lt;50; i++)
        this.messages.push(i)
    },
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
    &lt;b-overlay :show="true"&gt;
    {{ message }}
    &lt;!-- long content below extends the overlay size --&gt;
    &lt;!-- this moves the spinner down and off the viewport --&gt;
    &lt;ul&gt;
      &lt;li v-for="m in messages" :key="m"&gt;{{m}}&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/b-overlay&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I think key to solving this is finding the CSS selector that allows me to change the spinner's position to "fixed" as opposed to "absolute" which seems to be what bootstrap generates. </p>
  
  <p><a href="https://i.stack.imgur.com/XZy0y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XZy0y.png" alt="enter image description here"></a></p>