我有一个 div，其子 p 标签包含文本。
我希望p 标签的高度仅为70%。
这行得通，它只是父母身高的70%。然后我在 p 标签上使用“overflow: hidden;”来隐藏多余的内容。
然后我想我可以添加 15% margin-top 或添加 15% padding-top（到父级）以垂直居中父 div 中的 p 标签...但我发现我需要将它设置为比如3%....怎么会？
【问题讨论】：
标签： css height percentage
然后我想我可以添加 15% 的 margin-top 或添加 15% 的 padding-top （对父级）将 p 标签垂直居中在 div 中......但我 发现我需要将其设置为 3% 之类的......怎么会？
因为百分比边距和填充（顶部、右侧、底部和左侧）是计算的according to the containing blocks width.
顶部和底部边距不是根据父级的高度计算的，因此 15% margin-top 不是容器高度的 15% 而是容器宽度的 15%。
解决方法：
您可以使用绝对或相对定位，因为父级具有固定高度，并且以百分比表示的最高值是根据父级的高度计算的，因此top:15%; 将是父级高度的 15%。
【讨论】：
您可以使用定位来实现这一点。因此，不要设置 p 元素的高度，而是允许定位为您执行此操作（通过添加 bottom: 15%; 和 top:15%;）。这将为您提供 70% 的内容（我相信，如您所愿）：
div{
height:200px;
background:yellow;
position:relative;
}
p{
position:absolute;
width:100%;
background:red;
top:15%;
bottom:15%;
overflow:auto;
}<div>
<p>
i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p. i'm a long p.
</p>
</div>【讨论】：