使用角度材料将儿童md卡与父母中心对齐？

Question

这里我有一个由高分辨率图像背景和简单登录卡组成的登录屏幕，我希望它位于屏幕中间。

如何将卡片在父母中垂直和水平居中，这是一张带背景图片的简单div？这是我的HTML，我尚未创建任何外部CSS类：

<div style="background-image: url('./res/img/bg-2.jpg'); width: 100%; height: 100%; background-size: cover;" layout-align="center center">
    <md-card style="width: 30%; margin: 0;" layout-padding md-whiteframe="10">
        <form name="loginForm" novalidate ng-model="loginForm">
            <h2 style="margin-top: 0;">Login</h2>
            <md-input-container class="md-block" flex-gt-sm>
                <label>Username</label>
                <input type="text" ng-model="username">
            </md-input-container>
            <md-input-container class="md-block" flex-gt-sm>
                <label>Password</label>
                <input type="text" ng-model="password">
            </md-input-container>
            <div layout="row">
                <span flex></span>
                <md-button class="md-primary md-raised" ng-click="login.login(username, password)">Login</md-button>
                <md-button ng-click="login.register()">Register</md-button>
            </div>
        </form>
    </md-card>
</div>

我已经摆弄了flexboxes和layout-align。使用卡的layout-align属性允许我水平居中但不垂直居中。另一个问题的答案 - 仅与divs有关 - 表示要为display: inline-block;的孩子和text-align: center;的父母设置样式，但这只会使卡片水平居中并对齐文本字段和文本也在卡的中心（我绝对不想要）。非常感谢任何帮助，因为我对CSS和网络编程都很陌生。

Answer 1

您在包含div元素时需要layout和layout-align属性，所以：

layout="row" layout-align="center center"

请参阅此处示例 - http://codepen.io/parky128/pen/PGxGrX

请参阅文档中的示例 - https://material.angularjs.org/latest/layout/alignment