MaterializeCSS centering

How to center both vertically and horizontally.

by Michael Bøcker-Larsen

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js&quot;"></script>
<div class="valign-wrapper row login-box">
  <div class="col card hoverable s10 pull-s1 m6 pull-m3 l4 pull-l4">
    <form>
      <div class="card-content">
        <span class="card-title">Enter credentials</span>
        <div class="row">
          <div class="input-field col s12">
            <label for="email">Email address</label>
            <input type="email" class="validate" name="email" id="email" />
          </div>
          <div class="input-field col s12">
            <label for="password">Password </label>
            <input type="password" class="validate" name="password" id="password" />
          </div>
        </div>
      </div>
      <div class="card-action right-align">
        <input type="reset" id="reset" class="btn-flat grey-text waves-effect">
        <input type="submit" class="btn green waves-effect waves-light" value="Login">
      </div>
    </form>
  </div>
</div>

CSS

html,
body,
.login-box {
  height: 100%;
}

JavaScript

$('form').on('submit', function () { return false; });