Horizontal and vertical center card in material design lite(MDL)

Question

I, am trying to center the card vertically and horizontally in the center of the page. I, am able to center the card horizontally. But not able to center it as vertically. I didn't found any class in MDL to vertically center the card.

Code for center horizontally

<div class="mdl-grid">
            <div class="mdl-cell mdl-cell--3-col">
                <!-- this is just dummy columns -->
            </div>
            <div class="mdl-cell mdl-cell--6-col">
                <figure >
                    <div class="mdl-card mdl-shadow--6dp">
                        <div class="mdl-card__title mdl-color--primary mdl-color-text--white">
                            <h2 class="mdl-card__title-text ">Sign in</h2>
                        </div>
                        <div class="mdl-card__supporting-text">
                                                            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                <input class="mdl-textfield__input" id="login"/>
                                <label class="mdl-textfield__label" for="login">User Name</label>
                            </div>
                            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                <input class="mdl-textfield__input" type="password" id="password"/>
                                <label class="mdl-textfield__label" for="password">Password</label>
                            </div>
                        </div>

                        <div class="mdl-card__actions mdl-card--border">
                            <div class="mdl-grid">
                                <button class="mdl-cell mdl-cell--12-col mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-color-text--white">
                                    Sign in
                                </button>
                            </div>
                        </div>
                    </div>

                </figure>
            </div>
            <div class="mdl-cell mdl-cell--3-col">
                <!-- this is just dummy columns -->
            </div>
        </div>

The above code only center the card horizontally. I want to center the card vertically as well.

How can I achieve this in MDL Class.

Answer 1

If you're happy using CSS and not relying on MDL classes you can do this with flexbox very easily:

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

But generally it's better to create a wrapper element rather setting this style on body ..unless this is going to be the only element on the page as I guess it might be on a sign on page.

For a version that uses a wrapper instead see the updated fiddle, I've wrapped the mdl-grid with the wrapper and added height: 100vh to the wrapper styling:

https://jsfiddle.net/baouvnnx/6/