I wanted to vertically align a div inside another div. For this I was using line-height (= height of the div) and vertical-align: middle. But if I specify the line-height value in % instead of px, it doesn't work. I tried googling it but could not find. What can be the problem?

Try usign this approach...

Vertically aligns inner div and centers text.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example document</title>
<style>
#outer {background-color:#AAAAAA;height:250px;width:250px;display:table}
#inner {background-color:#E0E0E0;display:table-cell;vertical-align:middle;text-align:center}
</style>
</head>
  <body>
    <div id="outer"><div id="inner">Hello!</div></div>
  </body>
</html>