Centered form with material design lite

Question

I am looking for an easy to get a login form centered on the screen using Google's Material Design Lite library.

I've been through a number of iterations and this is the best I've come up 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 a better way of achieving a centered form on all screen sizes?

The divs with   feel really yucky!

Answer 1

How about 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 is centered</div>
    <div class="mdl-layout-spacer"></div>
</div>

Or if you prefer a css solution: Add an extra class to the grid containing the column to be centered. See codepen

<div class="mdl-grid center-items">
    <div class="mdl-cell mdl-cell--4-col">This div is centered</div>
</div>

.mdl-grid.center-items {
  justify-content: center;
}

Both options play nice when resizing.

Answer 2

You can use 'mdl-typography--text-center' :

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col mdl-typography--text-center">
    My center div
   </div>
</div>

Answer 3

Why not using mdl-cell--N-offset class? As pointed on the Components -> Layout -> Grid -> Configuration options in https://getmdl.io/components/index.html#layout-section/grid:

mdl-cell--N-offset

Adds N columns of whitespace before the cell

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col mdl-cell--4-offset">
    <p>Centered content!</p>
  </div>
</div>

This should work.

Answer 4

Just add these CSS rules:

.mdl-layout {
  align-items: center;
  justify-content: center;
}

and then put your content in this container:

<div class="mdl-layout">
  <!-- Your Content -->
</div>

Answer 5

I'm not familiar with Google's Material Design Lite library, but why not just make a "container" element wrapping the columns? Example:

CSS:

.customContainer {
    max-width: 960px;
    margin: 0 auto;
}

HTML:

<div class="customContainer">
    ...
</div>

Then from there you can put the full width column as desired.