材质设计精简版（MDL）中的水平和垂直中心卡

Question

我正在尝试将卡垂直或水平居中放置在页面中央。我可以将卡水平居中。但是无法将其垂直居中放置。我没有在MDL中找到任何可以使卡垂直居中的类。

水平居中代码

<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类中实现这一目标。

Answer 1

如果您喜欢使用 CSS 并且不依赖 MDL 类，您可以使用 flexbox 非常轻松地做到这一点：

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

但通常最好创建一个包装元素，而不是在 body 上设置此样式。除非这将是页面上的唯一元素，因为我猜它可能位于页面上的标志上。

对于使用包装器的版本，请参阅更新的小提琴，我已使用包装器包装了 mdl-grid 并添加height: 100vh到包装器样式中：

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