title: How to set the margin or padding as percentage of height of parent container?
body: <p>I had been racking my brains over creating a vertical alignment in css using the following</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.base{
          background-color:green;
       width:200px;
       height:200px;
       overflow:auto;
       position:relative;
   }
  
      .vert-align{
    padding-top:50%;
    height:50%;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- and used the following div structure. --&gt;
  
      &lt;div class="base"&gt;
         &lt;div class="vert-align"&gt;
          Content Here
         &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>While this seemed to work for this case, i was surprised that when i increased or decreased the width of my base div, the vertical alignment would snap. I was expecting that when I set the padding-top property, it would take the padding as a percentage of the height of the parent container, which is base in our case, but the above value of 50 percent is calculated as a percentage of the width. :(</p>
  
  <p>Is there a way to set the padding and/or margin as a percentage of the height, without resorting to using JavaScript? </p>