放大DIV标记

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

该解决方案工作正常，但现在我想增加文本大小，但问题是我不想使用'像'像单位措施，因为是一种静态的方式，无法适应所有屏幕大小。

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

HTML代码：

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

我现在面临的困难是与<div />的高度。我不能把div的高度等于body的高度，宽度是相等的，因为div是块元素，但我怎么把div的高度等于body的高度？

我已经试图把padding和margin为0和height到100%但没有任何工程。

任何人都可以帮助我吗？

2012-03-23 tt0686

Ehm，在接受的帖子中从昨天开始的代码'div'的高度是100％... 查看http://jsfiddle.net/Mikey/2mgMy/ – 2012-03-23 11:12:00

什么是100％是身高的身体。如果我清除display：table和display：table-cell从div属性，我意识到DIV从父元素获取相同的高度，在这种情况下BODY.So我可以增加元素的高度显示属性设置为表格单元格？ – tt0686 2012-03-23 11:13:48

我觉得这是你所需要的：

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

看到它在行动：100% height

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

你可以达到你想要使用JavaScript的东西。不过，我建议你不要这样做。让用户决定是否需要放大/缩放。

干杯！

2012-03-23 12:28:20

它的工作原理，但问题是身体没有填充视口的高度。加入此还有：

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

2012-03-23 11:12:42 Supr

感谢您的快速回答:) 如果您查看链接中的代码，您会看到我已经为body元素定义了这些属性。 – tt0686 2012-03-23 11:20:28

您的原始代码似乎可以在Opera的jsfiddle中使用，请参阅我要添加到帖子中的链接。你能展示你使用的实际代码吗？确保'之间有任何容器。我的块'和身体也有高度设置为100％。 – Supr 2012-03-23 11:28:16

我试图从BODY元素的display：table属性和DIV的display：table-cell属性中获取相同的高度，但文本不再保持居中。所以我的问题是，我怎么能把相同的高度放在使用display：table-cell属性的元素中？ – tt0686 2012-03-23 11:31:34

回答