Flexbox

Question

我试图将 flexbox 的内容垂直和水平居中，但它似乎不起作用：

这里是 CSS:

#about{
display: flex;
justify-content: center;
align-items: center;
}
.btn-about {
    -webkit-border-radius: 2;
    -moz-border-radius: 2;
    border-radius: 2px;
    color: #2A77C8;
    font-size: 1.8em;
    background: #ffffff;
    padding: 1em 3em;
    text-decoration: none;
    text-align: center;
}

和 HTML:

<div class="section" id="about">
    <div class="element"></div>
    <div class="btn-about">Wer bin ich?</div>
</div>

非常感谢您的支持！

Answer 1

使用

html,body, .section{
   width:100%;
   height: 100%;
}

除了以上css

勾选https://jsfiddle.net/1Lgovkdr/1/

Answer 2

对不起！错误是我的。我正在使用 fullPage.js 并且 flexbox 居中不起作用，除非您使用以下选项初始化函数：

verticalCentered: false

Flexbox - 不能垂直和水平居中 [fullPage.js]

Flexbox - cannot center vertically and horizontally [fullPage.js]

centering

fullpage.js