html - 如何将边距或填充设置为父容器高度的百分比？

Question

我一直在绞尽脑汁想使用以下方法在 css 中创建垂直对齐

.base{
        background-color:green;
	    width:200px;
	    height:200px;
	    overflow:auto;
	    position:relative;
	}

    .vert-align{
		padding-top:50%;
		height:50%;
	}

<!-- and used the following div structure. -->

    <div class="base">
       <div class="vert-align">
    	   Content Here
       </div>
    </div>

虽然这似乎适用于这种情况，但令我惊讶的是，当我增加或减少基本 div 的宽度时，垂直对齐会突然对齐。我期望当我设置 padding-top 属性时，它会将填充作为父容器高度的百分比，在我们的例子中是基础，但是上面的 50% 的值被计算为百分比宽度。 :(

有没有办法将填充和/或边距设置为高度的百分比，而无需使用 JavaScript？

Answer 1

修复是，是的，垂直填充和边距是相对于宽度的，但 top 和 bottom 不是。

所以只需将一个 div 放在另一个 div 中，并在内部 div 中使用类似 top:50% 的东西(记住 position 如果它仍然不起作用，则很重要)