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/

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

2 个答案: