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

Question

是否有一種特殊的方法可以使用flexboxes（或其他純CSS）在元素中垂直居中文本？

小提琴： 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%;}

Answer 1

使用line-height是一種解決方案，這里是與Fiddle的鏈接。

更新：我對flex模型有了更多的興趣，並找到了居中的屬性，所以我想這會為你提供更好的解決方案（盡管由於所有的prfix而不是那么整潔和優雅）。 以下是使用flex屬性進行對齊的Fiddle 鏈接。

這是一個解釋屬性用法的鏈接。

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

問題描述

1 個解決方案

解決方案1
6 已采納 2013-03-23 22:01:24

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

問題描述

1 個解決方案

解決方案1 6 已采納 2013-03-23 22:01:24

解決方案1
6 已采納 2013-03-23 22:01:24