How do I vertically center the text within a flex element?

问题

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

回答1:

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

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.

来源：https://stackoverflow.com/questions/15593669/how-do-i-vertically-center-the-text-within-a-flex-element

标签

css