Question

我尝试了响应式css布局，但是＆＃34; top：50％＆＃34;不能工作和离开：50％＆＃34;能够。为什么会这样？

<div style="position:relative;top:0%;left:0%;height:100%;width:100%">
    <div style="position:absolute;top:50%;left:50%;">
    </div>
</div>

Answer 1

定义父容器的维度，例如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>

或者

另一种方法是通过其顶部，底部，左侧和右侧属性拉伸父容器，即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>

Answer 2

考虑您的原始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>

内部/子div有position: absolute，因此它不在父元素的内容流中，也不会影响父元素的高度或宽度。

父div位于内容流中，但没有内容，因此其内在高度为零。但是，您指定了height: 100%，但这不会执行任何操作，因为div没有基于计算值的高度参考。因此，父div的计算高度值为零。

结果，子元素的top偏移量计算为零的50%，所以它位于父块的顶部边缘。

您需要为父div指定高度或指定

html, body {height: 100%}

因为这将允许div根据高度计算其高度 body基于html的高度（100％），取决于屏幕的高度。

Answer 3

请参阅以下链接。我相信你会有一个更好的结果，因为你正在尝试做什么，虽然我仍然不是100％肯定我明白这是什么。

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;}

Answer 4

这是另一个解决此问题的方法

expo --version

* {
  height: 100%;
}
.first{  
  position:relative;
  top:0%;
  left:0%;height:100%;
  width:100%"
}
div{
  position:absolute;
  top:50%;
  left:50%;
}

设置CSS top百分比不按预期工作

4 个答案: