フレックスレイアウト - 角度のある素材2を使用してdivをページにセンタリングするには

Question

ページの中央にカードを表示したいと思います。私はクラスの進行ウィザードを以下のように別のdivに入れます。

<div class="progress-wizard" > 
    <div fxLayout="row" fxLayoutAlign="center center"> 
    <mat-card> 
     <button mat-raised-button color="primary">Primary</button> 
    </mat-card> 
    </div> 
</div> 

CSS：このように

.progress-wizard { 
    height: 90vh!important; 
} 

、親のdivの高さとカードを継承していない第二のdivを中央に整列されていません。私はどのようにフレックスレイアウトが動作し、このための正しい解決方法を知りたいですか？

ありがとうございました。

Answer 1

私はそれにも苦労しました。そう私は何のために働いたのですか？あなたの要素を含むdivの上でこのクラスを使用して、中央に配置します。最新のflexLayoutは、ページをセンタリングするためにはうまく機能しません。幅は要素の固定幅で、中央に表示するすべてのコンテンツが表示されます。

.center { 
    position:absolute; 
    left:50%; 
    top:50%; 
    transform: translate(-50%, -50%); 
    width:350px; 
    text-align:center; 
    margin: 0 auto; 
} 

Answer 2

フレックスボックスは、垂直センタリングに非常に適したソリューションです。画面の中央にカードを表示するには、高さをビューポートの高さに設定する必要があります。

.card-container { 
    height: 100vh; 
} 

.card-container { 
 
    height: 100vh; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.card-content { 
 
    background-color: #546e7a; 
 
    color: #fff; 
 
    height: 100px; 
 
    width: 100px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    padding: 10px; 
 
    border-radius: 4px; 
 
}

<div class="card-container"> 
 
    <div class="card-content"> 
 
    Hey! I'm in the center. 
 
    </div> 
 
</div>