我一直在绞尽脑汁使用以下命令在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？