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

Posted 2023-02-22

【中文标题】材料设计精简版（MDL）中的水平和垂直中心卡

【英文标题】：Horizontal and vertical center card in material design lite(MDL)

【发布时间】：2018-05-26 19:07:15

【问题描述】：

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

【参考方案1】：

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

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

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

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

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

【讨论】：

他们在 MDL 中的任何类都可以垂直和水平居中卡片

嗯不确定，我有时会使用具有 valign-wrapper materializecss.com/helpers.html

的materialize

你能创造一支笔或小提琴吗？

是他们的替代选择而不是正文

@SanJaisy 如果我的回答对你有帮助，请点赞并接受