title: materialize css valign-wrapper not working within modal
body: <p>I want to create a modal that I can use to present an indeterminate loading bar.  The loading bar is the only element within the modal.  I want the loading bar to be vertically centered but the valign-wrapper isn't working for this case.  How can I get valign-wrapper to work as expected?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width"&gt;
  &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;!-- Compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"&gt;
  
  
   &lt;/head&gt;
   &lt;body&gt;
  
     &lt;div
        class="modal valign-wrapper"
        id="loading-modal"
        style="width: 50% !important ; height: 50% !important ;"
     &gt;
       &lt;div class="progress valign"&gt;
         &lt;div class="indeterminate" style="width: 50%"&gt;&lt;/div&gt;
       &lt;/div&gt;
     &lt;/div&gt;
  
  
     &lt;!-- Compiled and minified JavaScript --&gt;
     &lt;script
       src="https://code.jquery.com/jquery-3.3.1.js"
       integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
       crossorigin="anonymous"&gt;
     &lt;/script&gt;
     &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"&gt;&lt;/script&gt;
     &lt;script&gt;
         $(document).ready(function(){
           $('.modal').modal();
           $('.modal').modal('open');
         });
     &lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS Bin:
  <a href="https://jsbin.com/yuzonipexu/edit?html,output" rel="nofollow noreferrer">https://jsbin.com/yuzonipexu/edit?html,output</a></p>