如何垂直和水平居中 angularjs 材料卡（md-card）？ （角度 1.x）

Question

我有一个问题，我确定会有一个我找不到的简单解决方案。我正在构建一个简单的登录页面，其中我有一个角材料卡（md-card），仅此而已。在这种情况下，我在里面有正常的字段。

但是当我尝试将这张卡垂直和水平居中时，问题出现了，这似乎是不可能的。我看过关于这个的 文档，这就像使用一样简单 layout="row" layout-align="center center" 但显然对我不起作用。我在 codepen 和 plunker 中搜索了几个示例，但没有人用 md-card 这样做。

有人有一个简单的例子来说明如何在视图中仅将 md-card 居中？

原文由 Juan Antonio 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最后，我找到了一个简单的方法来做到这一点：

 <div layout-fill layout="column" layout-align="center none">
    <div layout="row" layout-align="center none">

        <md-card>

            <md-card-title>
                <md-card-title-text>
                    <span class="md-headline">Card title</span>
                </md-card-title-text>
            </md-card-title>

            <md-card-content>
                Card content
            </md-card-content>

        </md-card>
    </div>
</div>

原文由 Juan Antonio 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以尝试设置元素的尺寸，然后添加：

 margin-left: auto;
margin-right: auto;

它应该水平居中。

原文由 Maciej Rodzoś 发布，翻译遵循 CC BY-SA 3.0 许可协议