Css 使用角材质将子md卡与父md卡的中心对齐？ 这里有一个由高分辨率图像背景和一个简单的登录卡组成的登录屏幕，我想在屏幕中间居中。< /P>

如何将卡垂直和水平居中放置在父级中，这是一个带有背景图像的简单

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>

登录
用户名
暗语
登录
登记

---

我已经摆弄了

flexbox

和

layout align

。使用卡片的

布局对齐

属性，我可以水平居中，但不能垂直居中。另一个问题的答案——仅与

divs

有关——用

display:inline block设计孩子的样式和父级，且
文本对齐：居中，但这只是将卡片水平居中，并将文本字段和文本对齐到卡片的中心（我绝对不希望这样）。非常感谢您的帮助，因为我对CSS和web编程非常陌生。
您需要在包含的div元素上同时使用布局和布局对齐属性，因此：

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

参见此处示例-

参见文档中的示例-
Wow。那很容易。谢谢