Set margin-top to a % of the parent element's height

Question

I want an element's margin-top to be a % of the parent elements height.

For example if I have div that has height 100px, I want to create a p element inside of it that has margin-top: 25px, except by setting the p element's margin with % so it can handle its parent changing height.

Edit: For those that think this is obvious - you can't use margin-top: 25%. %'s for the box model except height use the parent element's width. So you are setting it to 25% of the parent div's width if you use margin-top: 25%.

Answer 1

This is what I see as one of the solution:

 <div style="height:100px; background-color:red; color:white; position:relative;">
     <div style="top: 25%;position: absolute;">
         <p> I want an elements margin-top to be a % of t</p>
     </div>
 </div>