为什么 height: 100% 和 width: 100% 不起作用？

Question

挫折

我不得不一次又一次地在互联网上搜索以找到一种方法来让一个简单的网页填满任何设备上的整个屏幕，这让我感到沮丧。我不关心分辨率、文本大小、文本是否出现在屏幕内或其他任何东西。我什么都不关心。我要显示一个单词，它应该位于屏幕中间，垂直和水平。

CSS 快把我逼疯了。我不明白为什么这不简单。和引导程序。嗯，非常感谢你们帮了我很多！但是为什么不创建一个能够占据屏幕上所有可见空间的类呢？

我尝试了很多变体，但没有一个有效。我就是无法将这个词传达到屏幕中央。

一些变化

最简单的一个： http: //jsfiddle.net/IcyFlame/ngVSd/

<div style="height: 100%; width: 100%; text-align: center; vertical-align: middle;">Word</div>

我不知道为什么这不起作用。我想知道为什么这行不通。更重要的是，如果你能告诉我如何让它发挥作用，我真的很喜欢。无时无刻、无处不在。

这是一个非常有用的问题：Setting height: 100% on my label element does not work

给出答案的人说是100%的。真的很酷。以及如何解决整体问题？哦不，我刚刚回答了问题。

此后的所有问题均已标记为重复。其中之一是：

身高：100%不行！为什么？

尽管问题完全不同，但主持人只是认为这是重复的，并将其标记为重复。

注意：我正在适应很多屏幕尺寸。我不想在最终代码中的任何地方编写任何类型的绝对像素高度和宽度。

请帮我解决这个问题

参考：我希望这个词位于中间，就像在这个 gorgeours 网站上一样：

http://debarghyadas.com/

请注意，这只是一个参考。我不想有背景图片。网页的整个标题部分占据整个屏幕，这就是我想要实现的目标。

一切都集中而美丽。那就是我想去的地方。

Answer 1

要实现垂直对齐，您必须在第一个 100% 大小的 div 内放置第二个 div。

近似居中（适合少量文本）很容易：http://jsfiddle.net/ngVSd/4

如果您想要正确居中，则必须显式设置中心 div 的高度和宽度，然后为其指定宽度和高度 1/2 的负边距。您还必须从正文中删除填充和边距。

请注意，要将文本在内部 div 中垂直居中，您还需要将其行高设置为与其高度相同：http://jsfiddle.net/ngVSd/6/

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

#outerDiv {
    height: 100%; 
    width: 100%;
    background-color: red; 
    text-align: center; 
}

#wordDiv {
    position: absolute;
    background-color: lightblue;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    line-height: 100px;
    margin: -50px -50px;
}

<div id="outerDiv">
    <div id="wordDiv">Word</div>
</div>