如何将angularjs材料卡（md卡）垂直和水平居中？ （Angular 1.x）

Question

我遇到了一个问题我肯定会找到一个我找不到的简单解决方案。我正在建立一个简单的登录页面，我有一个角度材料卡（md卡），仅此而已。在这个案例里面，我有正常的字段。

但是当我试图将这张卡垂直和水平放置时，问题出现了，这似乎是不可能的。我已经看到doc关于这个，这将是如此简单使用 layout="row" layout-align="center center"但是很明显不适合我。我在codepen和plunker中搜索了几个例子，但是没有人用md-card执行此操作。

有人举一个简单的例子说明如何在视图中居中显卡吗？

Answer 1

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

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

它应该水平居中。

Answer 2

你去了 - CodePen

• 列居中
  • 以行为中心，flex =＆＃34; 50＆＃34;
    • Card，flex =＆＃34; 50＆＃34;

标记

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column" style="background:green" layout-align="center">
    <div flex="50" layout="row" layout-align="center">
      <md-card flex="50"></md-card>
    </div>
</div>

Answer 3

最后，我找到了一种简单的方法：

<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>