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

Solution 1:

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.)

Solution 2:

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...

Solution 3:

.outerdiv {
  display: table-cell;
  vertical-align: middle;
}

Warning - it will not work in all browsers!