Flexbox - nicht vertikal zentriert und horizontal [fullPage.js]

Question

Ich versuche, den Inhalt eines Flexbox vertikal und horizontal zum Zentrum, aber es scheint nicht zu funktionieren:

Hier ist die 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; 
} 

und die HTML:

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

Vielen Dank für Ihre Unterstützung sehr!

Answer 1

Entschuldigen Sie! Der Fehler war meiner. Ich verwende fullPage.js und die Flexbox Zentrierung funktioniert nicht, wenn Sie die Funktion mit der Option initialisieren:

verticalCentered: false 

Answer 2

Verwenden

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

zusätzlich zu oben css

prüfen https://jsfiddle.net/1Lgovkdr/1/