材料デザインライト（MDL）の水平および垂直センターカード

Question

私は、ページの中央にカードを縦横にセンタリングしようとしています。私は、カードを水平に中央に置くことができます。しかし、それを垂直にセンタリングすることはできません。私は、カードを垂直方向にセンタリングするためのMDLのクラスは見つかりませんでした。上記のコードは、水平方向にのみカードを中央水平

<div class="mdl-grid"> 
      <div class="mdl-cell mdl-cell--3-col"> 
       <!-- this is just dummy columns --> 
      </div> 
      <div class="mdl-cell mdl-cell--6-col"> 
       <figure > 
        <div class="mdl-card mdl-shadow--6dp"> 
         <div class="mdl-card__title mdl-color--primary mdl-color-text--white"> 
          <h2 class="mdl-card__title-text ">Sign in</h2> 
         </div> 
         <div class="mdl-card__supporting-text"> 
                  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
           <input class="mdl-textfield__input" id="login"/> 
           <label class="mdl-textfield__label" for="login">User Name</label> 
          </div> 
          <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
           <input class="mdl-textfield__input" type="password" id="password"/> 
           <label class="mdl-textfield__label" for="password">Password</label> 
          </div> 
         </div> 

         <div class="mdl-card__actions mdl-card--border"> 
          <div class="mdl-grid"> 
           <button class="mdl-cell mdl-cell--12-col mdl-button mdl-button--raised mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-color-text--white"> 
            Sign in 
           </button> 
          </div> 
         </div> 
        </div> 

       </figure> 
      </div> 
      <div class="mdl-cell mdl-cell--3-col"> 
       <!-- this is just dummy columns --> 
      </div> 
     </div> 

中心ため

コード。私はカードを垂直にもセンターしたい。

MDLクラスでどうすれば実現できますか？

Answer 1

あなたはMDLクラスに依存するCSSを使用していない満足している場合は、非常に簡単にフレキシボックスでこれを行うことができます。

body { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

しかし、一般的に、それが体にこのスタイルを設定し、むしろラッパー要素を作成する方が良いでしょう。..これがページ上の唯一の要素になるのでなければ、ページ上のサインにあるかもしれないと思います。更新フィドルを見る代わりに、ラッパーを使用するバージョンについては

、私は、ラッパーでMDL-グリッドを包み、ラッパースタイリングにheight: 100vhを追加しました：

https://jsfiddle.net/baouvnnx/6/