Center align vertically

Question

I have a common problem, although I have not been able to solve it with solutions found elsewehere on Stack Overflow. I'm trying to vertically align a logo and a search bar overlayed on an image in a header with unknown height (since the image shrinks when browser width decreases, since it's responsive)

The challenges are:

1. I have a header image (img, not a CSS background image) in one div block and a logo & search bar in two other div blocks that need to be overlayed on the background image.
2. The header image will shrink in size as browse width decreases, as it's a responsive site. That means I don't know the height of the header.
3. The logo is to be floated left and the search bar to the right.
4. I need to somehow center the logo and search bar vertically, so that they always appear nicely, regardless of the height of the header image that they are overlayed on.

Example: http://www-dev.channelaustin.org/about

Any suggestion?

Answer 1

The first answer here, essentially answers your question. As you only want vertical centring, you should remove the:

top: 50%;