Set line-height as a percentage relative to the parent element

Question

I have a responsive element where it's width and height will both scale. Inside this I have some text which I want to center vertically.

How can I set the text's line-height to be the same as it's parent if I don't know the parent's height?

line-height: 100% is relative to the font's regular height so this doesn't help...

Answer 1

Here's another way to center an element vertically. I came across this technique some time ago. Basically it uses a pseudo element and vertical-align: middle.

.block::before {   content: '';   display: inline-block;   height: 100%;   vertical-align: middle;   margin-right: -0.25em; /* Adjusts for spacing */ }  /* The element to be centered, can    also be of any width and height */  .centered {   display: inline-block;   vertical-align: middle;   width: 300px; }