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.