Center a 'div' vertically in a % height 'div'

This has been asked enough times here as well as all over the Internet.

A quick search will bring you tons of results. Anyhow, my preferred way of doing this is to use display: table-cell; and vertical-align: middle;. See this page for an example. (Beware that this doesn't work on Internet Explorer 6.)

If your inner div has an absolute height (let’s say 100 pixels), you could do this:

.outerdiv{
  position: relative; // Or absolute, or fixed
  height: 80%;
}

.innerdiv{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;  // It's at 50%, but not really centered
  margin-top: -50px; // So just move it up by the half of its height :D
}

I don't like this solution very much, and I'm sure there are a lot of other possibilities (maybe using tables or display: table-cell;) - but this is the first that comes into my mind...