设置 CSS 最高百分比未按预期工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28238042/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting CSS top percent not working as expected
提问by HornedReaper
I tried a responsive css layout,but "top:50%" can't work and the "left:50%" can. Why it happened?
我尝试了响应式 css 布局，但是“top:50%”不能工作，而“left:50%”可以。为什么会发生？
<div style="position:relative;top:0%;left:0%;height:100%;width:100%">
<div style="position:absolute;top:50%;left:50%;">
</div>
</div>
采纳答案by user3030212
Define a dimension for the parent container, e.g. div:
为父容器定义一个维度，例如 div：
<div style="border: 2px solid red;position:relative;top:0%;left:0%;height:200px;width:300px">
<div style="border: 2px solid green;position:absolute;top:50%;left:50%;height:50%;width:50%">
</div>
</div>
Or
或者
Another way is to just stretch the parent container, i.e. div, by its top, bottom, left, and right properties. Like this:
另一种方法是仅通过其顶部、底部、左侧和右侧属性拉伸父容器，即 div。像这样：
<div style="border: 2px solid red;position: absolute;top: 0px;bottom: 0px;left:0px;right:0px;">
<div style="border: 2px solid green;position:absolute;top:50%;left:50%;height:50%;width:50%">
</div>
</div>
回答by Marc Audet
Consider your original HTML:
考虑您的原始 HTML：
html, body {
height: 100%;
}<div style="position:relative;top:0%;left:0%;height:100%;width:100%">
<div style="position:absolute;top:50%;left:50%;">test</div>
</div>The inner/child divhas position: absolute, so it is out of the content flow of the parent element and will not contribute to the height or width of the parent element.
内部/子元素div具有position: absolute，因此它在父元素的内容流之外，并且不会对父元素的高度或宽度做出贡献。
The parent divis in the content flow, but has no content, so its intrinsic
height would be zero. However, you specified height: 100%, but this will not do anything because the divhas no height reference on which to base a computed value. So the computed height value for the parent divis zero.
父级div在内容流中，但没有内容，因此其固有高度为零。但是，您指定了height: 100%，但这不会执行任何操作，因为div没有作为计算值基础的高度参考。因此，父项的计算高度值div为零。
As a result, the child element's topoffset computes to 50%of zero,
so it is positioned at the top edge of the parent block.
结果，子元素的top偏移量计算50%为零，因此它位于父块的顶部边缘。
You would need either to specify a height for the parent divor assign
您需要为父级指定高度div或分配
html, body {height: 100%}
as this would allow the divto compute its height based on the height of the
body, which is based on the height of the html, which being 100%, takes that of the screen.
因为这将允许div根据 的高度计算其高度，该高度
body基于 的高度html，为 100%，采用屏幕的高度。
回答by Huginn
See the link below. I believe you're going to have a better result with Fixed for what it is you're trying to do, although I'm still not 100% sure I understand what that is.
请参阅下面的链接。我相信您会通过 Fixed 获得更好的结果，尽管我仍然不能 100% 确定我理解那是什么。
http://jsfiddle.net/8q107wvb/1/
http://jsfiddle.net/8q107wvb/1/
body {background:#e9e9e9; color:#202020;}
#wrapper {width:500px; background:#fff; margin:50% auto;}
.centered-content {position: fixed; top: 50%; left: 50%; background:#fff; padding:20px;}
