使用 fullpage.js 垂直居中内容答案

【问题标题】：Vertically centering content with fullpage.js使用 fullpage.js 垂直居中内容
【发布时间】：2015-07-26 12:02:56
【问题描述】：

根据 fullpages.js 文档，应该可以使用参数verticallyCentered（默认为true）将.sections 的内容垂直居中。

但是，我无法让此功能与以下 HTML 结构一起使用：

<div id="content">
    <div class="section container">
        <div class="row">
            <div class="col-xs-12">
                <h1 class="title">Title</h1>
            </div>
        </div>
    </div>
</div>

.col-xs-12 div 的内容（即标题）保留在窗口顶部。

我正在使用 Bootstrap 搭建脚手架（如果有任何相关性的话）。此外，fullpage.js 的基本功能（即单页滚动）正常工作。

【问题讨论】：

标签： fullpage.js

【解决方案1】：

您可能正在使用一些绝对定位的元素，这就是 fullpage.js 无法处理它的原因。

您可以很容易地看到in the examples 使用verticalCentered:true（这是默认值）时，fullpage.js 将内容正确居中。

【讨论】：

【解决方案2】：

抱歉复活这个问题，但问题是你没有包含FullPage.js的css文件

【讨论】：

【解决方案3】：

我有同样的问题。我通过设置由 fullpage.js 添加的默认类来修复它：

.fp-tableCell {
 display: flex;
 align-items: center;
 justify-content: center;
}

【讨论】：

【解决方案4】：

由于我无法使用垂直居中功能，我最终通过将verticalCentered 设置为false 来禁用它。作为替代品，我现在使用开箱即用的jQuery-Flex-Vertical-Center。

【讨论】：