Question

昨天我问了一个问题How to make text vertically and horizontally center in an HTML page，关于在页面中间（垂直和水平）居中文本的方法。

解决方案工作正常，但现在我想增加文本大小，但问题是我不想使用'px'之类的单位度量，因为它是一种静态方式，无法适应所有屏幕尺寸

因此，我想使用文本的百分比单位度量。

HTML code：

<body>
    <div class="my-block">
       WORD1<br />
       WORDWORDWORDWORD2
    </div>
</body>

我面临的困难是<div />的高度。我不能将div的高度等于body的高度，宽度相等，因为div是块元素，但我如何将div的高度等于到body的高度？

我已尝试将padding和margin设为0，将height设为100%，但无效。

任何人都可以帮助我吗？

Answer 1

我认为这就是你所需要的：

<style type="text/css">
html {height: 100%;}
body {margin: 0;padding: 0;height: 100%;}
.my-block {height:100%;}
</style>

查看实际操作：100% height

但是，如果你想“调整”你的文字“适用于所有的屏幕尺寸”，那就有一个问题。与font-size一起使用的百分比和EM单位完全相同（至少在理论上，虽然％在兼容性方面更好） - 它们根据文本的实际大小（以像素为单位）缩放文本。换句话说，font-size：xx％不会根据容器的高度或宽度缩放文本，但会根据当前文本大小进行缩放。

请参阅css font units

您可以使用javascript实现您想要的效果。不过我建议你不要这样做。让用户决定是否需要放大/缩放。

干杯！

Answer 2

它有效，但问题是身体没有填充视口的高度。添加它：

html,body{
    margin: 0;
    padding: 0;
    height: 100%;
}

jsFiddle with your original code.

放大DIV标签

2 个答案: