Vertically center a div inside another div

Question

I\'m trying to vertical-align: middle a div inside another div, but for some reason it\'s not working properly. What am I doing wrong?

Answer 1

You can do this:

#block {
  border:         1px solid blue;
  margin:         25% 0;
  width:          500px;
  height:         250px;
  vertical-align: middle;
}

But that's not what you looking for!

or like this:

#wrapper {
  border:         1px solid red;
  width:          500px;
  height:         500px;
  display:        table-cell;
  vertical-align: middle;
}

#block {
  border:  1px solid blue;
  display: inline-block;
  width:   500px;
  height:  250px;
}