How to vertically align text to the middle inside div?

Sometimes its a headache aligning the text elements inside div to the middle. The easiest solution is to add line-height value equal to the height of the div element.

Problem:
Suppose we have

<style>
#box{
  float:left;
}
#btn{
  height:50px;
}
</style>

<button id="btn">Click me!</button><div id="box">This is a text</div>

This does not look good because it is not vertically aligned to the middle. So the solution is to add line and line-height to the box div.

<style>
#box{
  float:left;
  height:50px;
  line-height:50px;
}

</style>

The final corrected output likes this: