[解決済み】マージンやパディングを親コンテナの高さに対する割合で設定するには？

質問

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 プロパティを設定すると、親コンテナ (この場合は base) の高さに対する割合でパディングが取られると思っていましたが、上記の値 50 パーセントは幅に対する割合で計算されています :(

JavaScriptに頼らず、パディングやマージンを高さの割合で設定する方法はありますか？

解決方法は？

修正方法は、そう、垂直パディングとマージンは幅に対して相対的ですが top と bottom はない。

そこで、div を別の div の中に配置し、内側の div で、次のようなものを使用します。 top:50% (ただし position それでもうまくいかない場合は）