css - 使用 Angular Material 将子 md-card 与父中心对齐？

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="row" layout-align="center center"

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

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