角度材料を使用して、子供のMDカードを親の中心に揃えますか？

Question

ここでは、高解像度の画像の背景と、画面の中央に中央に配置する簡単なログインカードで構成されるログイン画面があります。私は、背景画像と簡単なdivで親に垂直方向と水平方向のカードを中央にするにはどうすればよい

？ここで私はまだ、外部CSSクラスを行っていないそのために私のHTMLは、次のとおりです。

<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要素を含む上のレイアウトとレイアウト - ALIGN属性の両方が必要になります。

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

は、ここで例を参照してください - http://codepen.io/parky128/pen/PGxGrX

は、ドキュメントの例を参照してください - https://material.angularjs.org/latest/layout/alignment