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 Class中实现此目的。

Answer 1

如果您对使用CSS感到满意并且不依赖于MDL类，则可以非常轻松地使用Flexbox执行此操作：

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

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

对于使用包装器的版本而不是看到更新的小提琴，我用包装器包装了mdl-grid并将height: 100vh添加到包装器样式中：

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

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

1 个答案: