html - Centered form with material design lite -

i looking easy login form centered on screen using google's material design lite library.

i've been through number of iterations , best i've come with:

<div class="mdl-cell--12-col mdl-grid">     <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet">&nbsp;</div>      <div class="mdl-grid mdl-cell--4-col">          <div class="mdl-textfield mdl-js-textfield mdl-cell-12-col">             <input class="mdl-textfield__input" type="text" id="username" />             <label class="mdl-textfield__label" for="username">username</label>         </div>          <div class="mdl-textfield mdl-js-textfield mdl-cell-12-col">             <input class="mdl-textfield__input" type="password" id="password" />             <label class="mdl-textfield__label" for="password">password</label>         </div>     </div>      <div class="mdl-cell mdl-cell--4-col mdl-cell--2-col-tablet">&nbsp;</div> </div> 

is there better way of achieving centered form on screen sizes?

the divs   feel yucky!

how using "mdl-layout-spacer": see codepen

<div class="mdl-grid">     <div class="mdl-layout-spacer"></div>     <div class="mdl-cell mdl-cell--4-col">this div centered</div>     <div class="mdl-layout-spacer"></div> </div> 

or if prefer css solution: add class grid containing column centered. see codepen

<div class="mdl-grid center-items">     <div class="mdl-cell mdl-cell--4-col">this div centered</div> </div>  .mdl-grid.center-items {   justify-content: center; } 

both options play nice when resizing.