使用 fullpage.js 垂直居中内容

Question

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

但是，我无法使用以下 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 的内容（即标题）保留在 window 的顶部。

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

Answer 1

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

Answer 2

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

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

Answer 3

很抱歉重新提出这个问题，但问题是您没有包含 FullPage.js

的 css 文件

Answer 4

我遇到了同样的问题。我通过设置默认 class 的样式来修复它，由 fullpage.js:

添加

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

使用 fullpage.js 垂直居中内容

Vertically centering content with fullpage.js

fullpage.js