center div vertically in a % height div?

Question

Hi there,

Is it possible to center a div vertically in a % height div?

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

Answer 2

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

Warning - will NOT work in all browsers!

Answer 3

if your inner div has an absolute hight (lets say 100px), 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 mutch 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...