javascript - 多个页面部分的垂直居中对齐

Question

背景:

我正在尝试创建一个互动类(class)。每节课都是一个页面，您可以向下滚动该页面以到达每个部分(我称之为卡片)。

理想场景

我希望每个部分(卡片)全屏显示，内容垂直居中...像这样:

我的代码

我正在从数据库中加载每张卡片(部分)...它有标题、内容和右侧图像的文件路径。

<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;
}