html - 为什么高度不为 : 100% and width: 100% work?

Question

沮丧

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

CSS 快把我逼疯了。而且我不明白为什么这不简单。和 Bootstrap 。好吧，非常感谢你们帮了我很多!但是，你他妈的为什么不创建一个只占用屏幕上所有可见空间的类？

我尝试了很多变体，但没有一个奏效。我就是没法把那个词放到屏幕中央。

一些变化

最简单的一个: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 doesn't work

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

之后的所有问题都被标记为重复。其中之一是:

Height: 100% doesn't work! Why?

虽然问题完全不同，但是版主只是认为这是重复的，并被标记为一个。

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

请帮我解决这个问题

引用:我希望这个词位于中间，就像在这个美食网站上所做的那样:

http://debarghyadas.com/

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

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

Answer 1

要获得垂直对齐，您必须在第一个 100% 大小的 div 中有第二个 div。

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

如果你想要适当的居中，你必须明确地设置中央 div 的高度和宽度，然后给它 1/2 宽度和高度的负边距。您还必须从正文中删除填充和边距。

请注意，要使文本在内部 div 中垂直居中，您还需要将其 line-height 设置为与其高度相同: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>