垂直中心ALIGN

Question

背景：私はインタラクティブなレッスンを作成しようとしています

。各レッスンは、各セクションに移動するためにスクロールする1ページです（私はカードと呼んでいます）。

理想的なシナリオこのような私は、各セクション（カード）は垂直方向の中央コンテンツとフルスクリーンになりたい

...：

マイコード

データベースから各カード（セクション）を読み込んでいます...タイトル、コンテンツ、およびファイルのパスがあります。 t。

<div class="container-fluid" style="background:#eaeaec"> 

    <?php foreach ($cards as $card) : ?> 

    <div class="container"> 
     <div style=" position: absolute;top: 50%;left: 50%;-moz-transform: translateX(-50%) translateY(-50%);-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);"> 
      <div class="col-md-6"> 

       <h1> 
        <?php echo $card->card_title; ?> 
        <i class="fa fa-volume-up"></i> 
       </h1> 

       <?php echo $card->card_content; ?> 

      </div> 
      <div class="col-md-6"> 
       <img src="<?php echo $card->card_file_path; ?>" alt="" style="width:100% !important"> 
      </div> 
     </div> 
    </div> 

    <?php endforeach; ?> 

</div> 

問題：

あなたは、私が試してみましたのインラインCSSを見ることができます。これは実際には素晴らしい...一つのカードのために...しかし、私は別のカードを追加すると、すべてのコンテンツは、最初のカードの上に中央になる！

質問：

は、どのように私は、各セクションが垂直方向にそのセクションに整列カード内容のウィンドウの正確な高さであることを得ることができます。

EDIT 1：位置に私のCSSを変更する：相対的には、以下の結果を持っている...

Answer 1

ヒント：インラインスタイルを使用しないようにしてください。

私はフレキシボックスを使用することをお勧め：カード上の相対位置を設定する

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