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

是否有一種特殊的方式來使用柔性盒（或其他純CSS）在一個元素中垂直居中文本？如何在flex元素中垂直居中文本？

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

來源

2013-03-23 Wk_of_Angmar

意外地問這裏，而不是堆棧溢出。將不勝感激。 :-) – 2013-03-23 21:42:26

使用flexbox，您可以在flex容器內垂直居中放置一個flex元素，但flexbox不支持在flex元素中居中放置文本內容。您需要使用與在非flex元素中對文本進行居中的相同技巧。 – 2013-03-24 02:46:43

使用line-height是一個解決方案，就是在link搗鼓。

更新：我參加了柔性模型多了幾分興趣，發現定心性能，所以我想這讓你更好的解決方案（雖然不是很整潔，優雅，因爲所有的prfixes的）。這裏是link小提琴使用flex屬性進行對齊。

這裏是一個link，它解釋了屬性的用法。

來源

2013-03-23 22:01:24

啊，不敢相信我忘了這件事。如果沒有人提供更優雅的解決方案，我會接受。 – 2013-03-23 22:13:48

儘管還有其他選擇（使用垂直對齊和圖像），但行高可能更優雅。下面是一篇描述兩種解決方案的文章的鏈接：http://hu.je/example – 2013-03-23 22:21:33

對於永遠不會環繞到第二行並位於具有固定高度的容器內的單行文本，這是可能是最優雅的解決方案。它是否符合您的要求？（如果沒有，你需要一個不同的解決方案） – 2013-03-24 02:41:05

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

回答

相關問題