Как я могу вертикально центрировать текст в элементе flex?

Существует ли специальный способ вертикального центрирования текста в элементе с помощью 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%;}
1 3
css flexbox html5 vertical-alignment text-alignment

1 ответ:

Использование line-height является одним из решений, вот Ссылка играть на скрипке.

Обновление: я немного больше интересовался моделью flex и нашел свойства центрирования, поэтому я думаю, что это лучшее решение для вас (хотя и не такое аккуратное и элегантное из-за всех исправлений). Вот Ссылка возиться используя свойства Flex для выравнивания.

А вот и Ссылка это объясняет использование свойств.

6