Flexbox - не центр по вертикали и по горизонтали [fullPage.js]

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

Извините! Ошибка была моей. Я использую fullPage.js и Flexbox центровка не работает, если вы не инициализировать функцию с параметром:

verticalCentered: false 

Answer 2

Использование

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

в дополнение к выше CSS

Проверить https://jsfiddle.net/1Lgovkdr/1/