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

问题描述：

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

Is there a special way to vertically center text in an element using flexboxes (or other pure 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%;}

答

使用 line-height 是一个解决方案，这里是链接到小提琴。

Using line-height is one solution, here's the link to Fiddle.

更新： strong>我对flex模型有一点兴趣，发现了对中属性，所以我想这为你做一个更好的解决方案（虽然不是那么整洁，优雅，因为所有的prfixes）。这是链接使用flex属性进行对齐。

Update: I took a little more interest in the flex model and found the centering properties, so I guess this makes a better solution for you (although not that neat and elegant because of all the prfixes). Here is the link to Fiddle using flex properties for alignment.

这里是链接，解释属性的用法。

And here is a link that explains the usage of the properties.

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

相关推荐