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 doesn't work

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

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

Height: 100% doesn't work! Why?

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

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

请帮我解决这个问题

参考：我想让这个词出现在这个gorgeours网站上：

http://debarghyadas.com/

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

一切都是中心和美丽的。那是我想去的地方。

Answer 1

说实话，我并不真正了解vertical-align正在做什么。所以我无法解释你的例子失败的地方。但是，如果您不关心与IE7及更小版本的兼容性，您可以使用＆＃39; display：table＆＃39;选项：

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

希望有所帮助。

Answer 2

要获得垂直对齐，您必须在第一个100％大小的内部使用第二个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>

Answer 3

您需要将html和body（任何其他父母）的宽度和高度设置为100％，因为100％表示100％的父宽度/高度，而不是100％屏幕的百分比。

Answer 4

div父级没有指定高度来计算％。

您需要将高度设置为body，而％body也需要根据父亲的身高html进行计算。

<html>将使用窗口浏览器作为参考来计算％。

请参阅 W3C网站上的this。

指定百分比高度。
百分比是根据生成的包含块的高度计算的。
如果没有明确指定包含块的高度（即，它取决于内容高度），并且该元素没有绝对定位，则该值计算为“自动”。根元素的百分比高度相对于初始包含块。注意：对于其包含块基于块级元素的绝对定位元素，百分比是根据该元素的填充框的高度计算的。这是CSS1的变化，其中百分比总是相对于父元素的内容框计算。

为什么身高不高：100％和宽度：100％有效？

4 个答案: