css - 如何在 flexbox 中垂直居中文本？

Question

刚找到我的问题的解决方案，因为我要在这里问它。

所以我想我可以和你分享这个。

我需要垂直分布三个元素，内容居中。

HTML:

<div id="container">
    <a id="item1">Item 1</a>
    <a id="item2">Item 2</a>
    <a id="item3">Item 3</a>
</div>

CSS:

#container{
    position:absolute;
    height:100%;
    width:100%;
    text-align:center;
    display:flex;
    flex-direction:column;
}
#container a{
    flex:1;
}
#container a:nth-child(odd){
    background:rgba(0,0,0,.2); /* Just for visibility purpose */
}

使用这段代码，创建了一个 flex 上下文，以在可用的垂直空间中分配 a 标签。但是，我想知道如何让他们的文字居中。

Answer 1

好吧，我们的想法是将每个子项都变成一个 flexbox。然后，我们将能够轻松地将他们的内容居中。

新的 CSS:

#container{
    position:absolute;
    height:100%;
    width:100%;
    /* text-align:center; <-- This is now unappropriate */
    display:flex;
    flex-direction:column;
}
#container a{
    flex:1;

    /* This was added:      */
        display:flex;
        align-items: center;
        justify-content: center;
}