Me había estado estrujando el cerebro creando una alineación vertical en CSS usando lo siguiente

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

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

y usó la siguiente estructura div.

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

Si bien esto parecía funcionar para este caso, me sorprendió que cuando aumentaba o disminuía el ancho de mi div base, la alineación vertical se rompería. Esperaba que cuando estableciera la propiedad padding-top, tomaría el relleno como un porcentaje de la altura del contenedor principal, que es la base en nuestro caso, pero el valor anterior del 50 por ciento se calcula como un porcentaje del anchura. :(

¿Hay alguna manera de establecer el relleno y / o el margen como un porcentaje de la altura, sin recurrir al uso de JavaScript?