有没有一种特殊的方法可以使用 flexboxes(或其他纯 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%;}
最佳答案
使用 line-height 是一种解决方案，这里是 link 到 fiddle 。
更新:我对 flex 模型更感兴趣并找到了居中属性，所以我想这对您来说是一个更好的解决方案(尽管由于所有前缀而没有那么整洁和优雅).这是 link 到 Fiddle 使用 flex 属性进行对齐。
这是一个 link 解释了属性的用法。
关于css - 如何在 flex 元素中垂直居中文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15593669/