css - 设置 CSS 最高百分比未按预期工作

Question

我尝试了响应式 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>

Answer 1

为父容器定义一个维度，例如分区:

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

或者

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