我正在尝试将卡片垂直和水平居中在页面中心。我能够将卡片水平居中。但是无法将其垂直居中。我没有在MDL中找到任何类来垂直居中卡片。
水平居中的代码
```css .card { margin: 0 auto; } ```
<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>
上面的代码只能水平居中卡片。我也想垂直居中卡片。
在MDL类中,我该如何实现呢?