如何在 flex 元素中垂直居中文本？
Posted
技术标签:
【中文标题】如何在 flex 元素中垂直居中文本？【英文标题】：How do I vertically center the text within a flex element? 【发布时间】：2013-03-13 16:28:40 【问题描述】：有没有一种特殊的方法可以使用弹性框（或其他纯 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%;
【问题讨论】：
这里不小心问了 Stack Overflow。会感激一个举动。 :-) 使用 flexbox，您可以在 flex 容器内垂直居中 flex 元素，但 flexbox 不支持在 flex 元素内居中文本内容。您需要使用与在非弹性元素中居中文本相同的技巧。 【参考方案1】：使用line-height 是一种解决方案，这是 Fiddle 的 link。
更新：我对 flex 模型产生了更多的兴趣并发现了居中属性，所以我想这对你来说是一个更好的解决方案（尽管由于所有的前缀而不是那么整洁和优雅）。这是使用 flex 属性对齐的 link 到 Fiddle。
这里有一个link，它解释了属性的用法。
【讨论】：
啊，真不敢相信我忘了这件事。如果没有人提供更优雅的解决方案，我会接受。 虽然有另一种选择（使用垂直对齐和图像），但行高可能更优雅。这是描述这两种解决方案的文章的链接：hu.je/example 对于永远不会绕到第二行的单行文本，并且位于具有固定高度的容器内，这是可能的最优雅的解决方案。它符合您的要求吗？ （如果没有，您将需要不同的解决方案） 我不希望内容可以换行，但这并不能说明边缘情况（可以换行）可能/应该发生的情况。至于现在，这就是我想要的，但它并不完全符合我的要求。但是，有一些 hacky 变通方法可以使它成为一个令人满意的解决方案。 CSS 对于创建布局来说绝对是一团糟。以上是关于如何在 flex 元素中垂直居中文本？的主要内容，如果未能解决你的问题，请参考以下文章