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!

The divs may seem yucky, but that is the current recommended way to handle push state. You also don't need the last one in this structure, it will be fine without it. — Garbee, Jul 16 '15 at 21:24
For people reading this question now and in the future: MDL is deprecated and you should be using MDC. It sucks, but it'll save you more pain in the future to drop MDL unless a swarm of people start supporting it. I'm using it via https://github.com/kradio3/react-mdc-web and it is working out decently so far. I can control anything I need to, and I was able to get up and running pretty easily. Here is an example of some centered content with MDC: https://codepen.io/SgtPooki/pen/ZJxooN — SgtPooki, Aug 21 '17 at 06:58
As grid docs says https://getmdl.io/components/index.html#layout-section/grid you can set a maximum grid width (max-width) and its content will be centered. — Vyacheslav Konovalov, Jun 10 '19 at 07:23

passerby · Accepted Answer · 2016-11-27T05:46:49.090

78

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.

edited Nov 27 '16 at 05:46

answered Aug 21 '15 at 09:51

passerby

1,412
16
23

any example of a login screen in MDL? – SuperUberDuper Dec 23 '15 at 12:54
This answer is huge. `justify-content: center;` is pure gold. THANK YOU – Ronnie Royston Feb 12 '17 at 01:53

score 24 · Answer 2 · answered Sep 22 '15 at 12:52

24

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>

answered Sep 22 '15 at 12:52

Maxxx

1,139
3
15
20

Works also with `mld-card`. – Serge Stroobandt Mar 27 '21 at 18:21

score 16 · Answer 3 · answered May 30 '16 at 19:29

16

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.

answered May 30 '16 at 19:29

Pedro Adame Vergara

535
4
17

Thank you, I think this is a great and simple solution becauses it uses the framework configuration. – Stephane L Apr 20 '18 at 13:59

score 7 · Answer 4 · answered Oct 06 '15 at 15:59

7

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>

answered Oct 06 '15 at 15:59

Paweł Hajduk

405
1
5
14

score 5 · Answer 5 · edited Mar 13 '16 at 19:10

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.

edited Mar 13 '16 at 19:10

Community

1
1

answered Jul 16 '15 at 20:20

Josh Salazar

412
2
10

You can also simply apply the `max-width` to the `mdl-grid` element to achieve the same effect. – Sérgio Gomes Sep 22 '15 at 13:57

Centered form with material design lite

5 Answers5

mdl-cell--N-offset