垂直中心对齐多个页面部分

Question

背景：

我正在尝试创建一个互动课程。每节课都是一个向下滚动以进入每个部分的页面（我称之为卡片）。

理想情景

我希望每个部分（卡片）全屏，内容垂直居中......就像这样：

我的代码

我从数据库中加载每张卡片（部分）...它有一个标题，内容和右边图像的文件路径。

<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。这确实很有效...对于一张卡片......但是当我添加另一张卡片时，所有内容都集中在第一张卡片的上方！

问题：

如何让每个部分成为窗口的确切高度，并且卡片内容与该部分垂直对齐。

编辑1：将我的css更改为position：relative具有以下结果...

Answer 1

提示：尽量避免使用内联样式。

我建议使用flexbox：

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