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

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如果它仍然无法正常工作）