材料设计语言中水平和垂直居中卡片

Question

材料设计语言中水平和垂直居中卡片

jqueryhtmlcssmaterial-designmaterial-design-lite

7

我正在尝试将卡片垂直和水平居中在页面中心。我能够将卡片水平居中。但是无法将其垂直居中。我没有在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类中，我该如何实现呢？

- San Jaisy

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pixelomo · Accepted Answer

如果您习惯使用 CSS，而不是依赖于 MDL 类，您可以很容易地使用 flexbox 实现此功能：

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

通常而言，最好创建一个包装元素，而不是将这个样式设置在body上...除非这是页面上唯一的元素，就像我猜测在登录页面上可能会有这种情况。

如果您想使用包装器版本，请查看更新的fiddle，我已经用包装器包装了mdl-grid，并向包装器样式中添加了height:100vh：

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