如何在流畅的布局中垂直缩放和居中文本？ （使用 CSS）

Question

我有一个由标题和内容区域组成的流畅布局。标题应占窗口高度的 10%，而内容区域应占剩余的 90%。整个屏幕中的文本应该与窗口的高度成比例地缩放。标题中的文本也应垂直居中。除了最后一个，我能够满足所有这些要求。有人知道怎么做吗？

这是我目前所拥有的：http://jsfiddle.net/nareshbhatia/h2s4h/

我正在使用 Em 单位来调整文本的相对大小。每当调整窗口大小时，我都会使用 JavaScript 更改 body 元素的字体大小。这种方法可以为整个窗口漂亮地缩放字体。最后，我尝试通过将标题的行高设置为与其高度相同（即 10%），使标题文本垂直居中。这通常使文本垂直居中（当高度以像素为单位定义时），但在这种情况下，文本不会垂直居中。有关如何解决此问题的任何想法？

编辑 jsFiddle 已更新以显示建议的答案。

Answer 1

当您只有一行时，行高方法使文本居中。您使用的是百分比，所以我认为this question might help in that respect。

你可以做的是在加载时使用更多的 jQuery 或 JS：

• 在.content中测量段落（或您正在使用的任何元素）的外部高度

• 计算该段落底部offset 与.content 的关系（从段落底部边框到.content div 底部边框之间的剩余空间）

• 将余数一分为二，然后将该数字添加为段落的顶部margin 或顶部position。

这将使您拥有更长的文本，而不会弄乱行高。

如果您想要纯 css 解决方案，请查看这些alternative ways of centering vertically。