logo标签列表

为什么设置高度为100％和宽度为100％不起作用？

htmlcss
7

沮丧

我感到很沮丧，因为不得不一次又一次地在互联网上搜索如何在任何设备上使简单的网页填满整个屏幕。分辨率、文本大小、文本是否在屏幕内部等我都不在乎。我只想显示一个单词，并使其水平和垂直居中显示。

CSS让我抓狂。我不明白为什么这不更简单。Bootstrap？好吧，真的很感谢你们，帮了我很多忙！但是为什么你们没有一个类可以简单地占据屏幕上所有可见的空间呢？

我尝试了许多变化，但没有一个能够实现我想要的效果。我就是无法将那个单词置于屏幕的中心位置。

一些变体

最简单的方法：http://jsfiddle.net/IcyFlame/ngVSd/

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

我不知道为什么这个不起作用。我想知道为什么它不起作用。更重要的是，如果你告诉我如何让它工作，我会非常感激。所有时候，到处都是。

这是一个非常有用的问题：在我的标签元素上设置高度：100%无法正常工作

回答者说这是100%的什么。真酷。那我该如何解决整个问题呢？哦不，我刚回答了这个问题。

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

高度：100％不起作用！为什么？

尽管问题完全不同，但版主们认为这是一个重复的问题，并将其标记为一个。

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

请帮我解决这个问题

参考：我希望字能像这个美妙的网站一样居中：

http://debarghyadas.com/

请注意，这只是一个参考。我不想要背景图像。整个网页的头部占据整个屏幕，这就是我想实现的。

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

3
它在高度上确实是100％。具体来说，它是其父元素html，body的100％（仅考虑文本的内容高度约为20px）。将html，body调整为100％将使<div>与之匹配。请注意，让文本垂直居中是完全不同的问题。 http://jsfiddle.net/ngVSd/1/ - MackieeE
重复：https://dev59.com/pm445IYBdhLWcg3wl7TW - Mani
1
@IcyFlame 这是一个在SO之前已经涵盖得很好的主题，同样因为<div>不是table-cell元素，而vertical-align是为其设计的。请参考：w3.org官方文档关于<div>没有“适用于”vertical-align的任何参考。 - MackieeE
1
要实现垂直对齐，必须在第一个100%大小的div内部再添加一个div。大致居中：http://jsfiddle.net/ngVSd/4/ 如果您想要正确的居中，您必须显式设置中央div的高度和宽度，然后给它负的1/2宽度和高度的边距。 - Will Jenkins
@MackieeE 如果你能仔细阅读我所提到的问题，它只是告诉我们如何垂直居中，而没有水平居中。我建议你再次阅读我的问题。无论如何，我很高兴Will Jenkins的回答。所以，我会采用那个方案！ - IcyFlame
显示剩余3条评论
4个回答
2
要实现垂直对齐，您必须在第一个100％大小的div内部放置第二个div。

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

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

请注意，要在内部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>

1
坦白说，我不太明白vertical-align的作用。所以我无法解释你的示例失败的原因。但是，如果您不关心与IE7及更早版本的兼容性，可以使用'display: table'选项：
<div style="display: table; width: 100%; height: 100%; text-align: center">
<div style="display: table-cell; vertical-align: middle;">Word</div>
</div>

希望能有所帮助。
你是对的！我在不理解其作用的情况下使用了垂直对齐。我喜欢@Will Jenkins的答案，已标记为接受。 - IcyFlame
0

您需要将 html 和 body（以及其他父元素）的宽度和高度设置为 100%，因为 100% 意味着相对于父元素的宽度/高度，而不是屏幕的宽度/高度。

我已经做过了。我已经通过div从html中获取了所有的高度和宽度，并将它们设置为100%。 - IcyFlame
1
我认为这可能是你需要的：http://blog.themeforest.net/tutorials/vertical-centering-with-css/ - Filip Haglund
HTML 从来没有旨在支持垂直定位，这应该由浏览器根据屏幕宽度处理，就像维基百科一样。 - Filip Haglund
HTML 可以被样式化，即使它不是用来展示的，但 CSS 的值可以被继承或用作参考，比如高度、字体大小。有没有人看过我留在上面的 W3C 链接？ - G-Cyrillus
不错，我不知道div不支持垂直对齐。 我想浏览器太宽容了。 - Filip Haglund
0

div 父元素没有指定高度以计算 %。

您需要设置 body 的高度，并且对于 %，body 还需要从父元素的高度进行计算：html。

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

请参见W3C网站上的此处。

指定百分比高度。
百分比是相对于生成的框的包含块的高度计算的。
如果未明确指定包含块的高度（即它取决于内容高度），并且此元素未绝对定位，则该值计算为“auto”。根元素上的百分比高度相对于初始包含块。注意：对于其包含块基于块级元素的绝对定位元素，百分比是相对于该元素的填充框的高度计算的。这是与 CSS1 不同的地方，CSS1 中百分比始终相对于父元素的内容框计算。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接