如何在流体布局中垂直缩放和居中文本？ （使用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。