如何在 flex 元素中垂直居中文本？

Question

如何在 flex 元素中垂直居中文本？

csshtmlvertical-alignmenttext-alignmentflexbox

3

在使用flexbox（或其他纯CSS方法）时，有没有一种特殊的方式可以垂直居中元素中的文本？

Fiddle: http://jsfiddle.net/WK_of_Angmar/JZZWg/

<body>
<div id="main">
    <section id="a">Test1</section>
    <section id="b">Test2</section>
</div>

#a {
    flex: 1 0 auto;
}
#b {
    flex: 0 0 auto;
    min-height: 3em;
    background-color: yellow;
}
#a {
    background-color: blue;
}
#main {
    display: flex;
    flex-direction: column;
    height: inherit;
}

body {height: inherit;}
html {height: 100%;}

- Wk_of_Angmar

不小心在这里问问题了，本应该去 Stack Overflow。如果能转移过去就非常感激 :-) - Wk_of_Angmar

使用flexbox，您可以在flex容器中垂直居中flex元素，但是flexbox不支持在flex元素内部居中文本内容。您需要使用与在非flex元素中居中文本相同的技巧。 - Matt Coughlin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Miloš Miljković · Accepted Answer

使用 line-height 是一种解决方案，这是指向 Fiddle 的链接：http://jsfiddle.net/JZZWg/7/ 更新：我对 flex 模型更感兴趣并找到了居中属性，所以我认为这对您来说是更好的解决方案（尽管由于所有前缀而不是那么整洁和优雅）。这是使用 flex 属性进行对齐的 Fiddle 链接：http://jsfiddle.net/JZZWg/27/ 这里是一个解释属性用法的链接：http://www.html5rocks.com/en/tutorials/flexbox/quick/