How to use line-height with percentage?

Question

There are two Examples one with PX and the other with % but I don’t know how to use % what I put in all2 to be the same as all1?

#tudo1{
  background: blue;
  width: 20%;
  height: 50px;
  margin-bottom: 30px;
}
#ma1{
  height: 25px;
  line-height: 25px;
}
#gira1{
  height: 25px;
  line-height: 25px;
  background: green; 
}

/*******************************/
#tudo2{
  background: blue;
  
  width: 20%;
  height: 50px;
  margin-bottom: 30px;
}
#ma2{
  height: 50%;
   /*line-height: ; o que coloco aq? 
  para ficar igual ao tudo1 afim de fazer
  a letra ficar centralizada verticalmente*/
}
#gira2{
  height: 50%;
  background: green; 
  /*line-height: ; o que coloco aq? 
  para ficar igual ao tudo1 afim de fazer
  a letra ficar centralizada verticalmente*/
}

<div id="tudo1">
 
  <div id="ma1">macaco</div>
  <div id="gira1">girafa</div>
</div>


<div id="tudo2">
 
  <div id="ma2">macaco</div>
  <div id="gira2">girafa</div>
  
</div>

Answer 1

In the example you mounted to align the text vertically using line-height in % you will have to put the height of the line-height 3x greater than the height of the height of the Father.

For example: if the Father has height:100px and every Son has height:50% of the height of the Father line-height has to be 300% (3 x 100) for the text to be vertically aligned.

In the snippet below I put some models with line-height in % for you to see better.

#tudo1{
  background: blue;
  width: 20%;
  height: 50px;
  margin-bottom: 30px;
}
#ma1{
  height: 25px;
  line-height: 25px;
}
#gira1{
  height: 25px;
  line-height: 25px;
  background: green; 
}

/*******************************/
#tudo2{
  background: blue;
  width: 20%;
  height: 50px;
  margin-bottom: 30px;
}
#ma2{
  height: 50%;
  line-height: 150%;
}
#gira2{
  height: 50%;
  background: green; 
  line-height: 150%;
}
/*******************************/
#tudo3{
  background: blue;
  width: 20%;
  height: 100px;
  margin-bottom: 30px;
}
#ma3{
  height: 50%;
  line-height: 300%;
}
#gira3{
  height: 50%;
  background: green; 
  line-height: 300%;
}
/*******************************/
#tudo4{
  background: blue;
  width: 20%;
  height: 200px;
  margin-bottom: 30px;
}
#ma4{
  height: 50%;
  line-height: 600%;
}
#gira4{
  height: 50%;
  background: green; 
  line-height: 600%;
}

<div id="tudo1">
  <div id="ma1">macaco</div>
  <div id="gira1">girafa</div>
</div>


<div id="tudo2">
  <div id="ma2">macaco</div>
  <div id="gira2">girafa</div>
</div>

<div id="tudo3">
  <div id="ma3">macaco</div>
  <div id="gira3">girafa</div>
</div>

<div id="tudo4">
  <div id="ma4">macaco</div>
  <div id="gira4">girafa</div>
</div>