Vertical align in Materialize CSS

I'm trying to center a form on the screen using Materialize. I tried everything, but I can not do it for all resolutions and also be responsive. In certain resolutions it works perfect, but when you add or remove controls (), in some resolutions it looks good, in others it goes wrong. Some help? Thank you!

Code

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Test</title>
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

  <style>
    .card {
      margin: 1rem 0 1rem 0 !important;
    }
    
    .card .card-title {
      background-color: #26a69a;
    }
    
    .card-title span {
      display: block;
      text-align: center;
      padding: 5px;
    }
    
    .card-content {
      padding: 30px;
    }
    
    .valign {
      width: 100%;
    }
    
    .valign-wrapper {
      width: 100%;
      background: url("http://vunature.com/wp-content/uploads/2016/10/trees-woods-tree-nature-path-forest-landscape-amazing-pictures-of-wallpapers.jpg") no-repeat;
    }
    
    .circle {
      display: block;
      margin: 10px auto;
    }
  </style>

</head>

<body>

  <header class="navbar-fixed">
    <nav class="top-nav">
      <div class="nav-wrapper grey darken-3">
        <a class="brand-logo center" href="#">Logo</a>
        <ul class="right">
          <li>
            <a href="#" id="registerLink">Register</a>
          </li>
          <li>
            <a href="#" id="loginLink">Log in</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>

  <div class="valign-wrapper">
    <div class="valign">
      <div class="container">
        <div class="card">
          <div class="card-title white-text">
            <span>Register</span>
          </div>
          <div class="card-content">
            <p>
              Text text text text text text text text text text text text text text text text text text text text text text text
            </p>
            <form action="#" enctype="multipart/form-data" id="externalRegisterForm" method="post" novalidate="novalidate">
              <div class="validation-summary-valid text-danger" data-valmsg-summary="true">
                <ul>
                  <li style="display:none" />
                </ul>
              </div>
              <div>
                <section style="position: absolute; left: 50%; transform: translateX(-50%); display: none;">
                  <input type="submit" class="btn" value="Sign In">
                  <input type="submit" class="btn" value="x">
                </section>
                <img class="circle" src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png" width="128" height="128" alt="">
              </div>
              <div class="row">
                <div class="input-field col s12 m4 l4 xl4">
                  <input class="validate" data-val="true" data-val-required="El campo Nombre de usuario es obligatorio." id="UserName" name="UserName" type="text" />
                  <label for="UserName" class="active">Username</label>
                </div>
                <div class="input-field col s12 m4 l4 xl4">
                  <input class="validate" data-val="true" data-val-required="El campo Nombre(s) es obligatorio." id="Name" name="Name" type="text" />
                  <label for="Name" class="active">Name</label>
                </div>
                <div class="input-field col s12 m4 l4 xl4">
                  <input class="validate" data-val="true" data-val-required="El campo Apellido(s) es obligatorio." id="LastName" name="LastName" type="text" />
                  <label for="LastName" class="active">Last name</label>
                </div>
                <div class="input-field col s12">
                  <input class="validate" data-val="true" data-val-required="El campo Email es obligatorio." id="Email" name="Email" type="text" />
                  <label for="Email" class="active">Email</label>
                </div>
              </div>
            </form>
          </div>
          <div class="card-action">
            <input type="submit" class="btn" value="Sign In" form="externalRegisterForm" />
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-latest.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $('.button-collapse').sideNav();
    });
  </script>

</body>

</html>

EDIT

https://image.ibb.co/h7ESBk/1.jpg

See the white line below. It is a resolution of 1366x768. If you add more input, it looks "normal" and responsive. But if you delete an input you can see how the white background is larger.

Solution

Based on the feedback you gave in the comments, I think all you need is to add min-height: calc(100vh - 64px); to .valign-wrapper.

That will fill the whole page. You may have to modify the background property as well to make sure the image fills up the whole element, I couldn't load the image so I couldn't test that. The vertical alignment is already working.

Before:

After: