세로 가운데 정렬

Question

스택 오버플로에서 발견 된 솔루션으로 해결할 수는 없지만 일반적인 문제가 있습니다. 나는 수직 로고 및 알 수없는 높이의 헤더 이미지를 오버레이 검색 막대를 정렬하기 위해 노력하고있어

도전은 (는 반응이기 때문에 브라우저 폭이 감소 할 때 이미지가 축소 이후) :

1. 하나의 div 블록에는 헤더 이미지 (img, CSS 배경 이미지가 아님)가 있고 백그라운드 이미지에 오버레이되어야하는 두 개의 다른 div 블록에는 & 검색 막대가 있습니다.
2. 반응 형 사이트이기 때문에 찾아보기 너비가 줄어들수록 헤더 이미지의 크기가 줄어 듭니다. 즉, 헤더의 높이를 알지 못합니다.
3. 로고는 왼쪽으로, 검색 창은 오른쪽으로 띄워 둡니다.
4. 로고와 검색 막대를 세로 가운데에 배치해야 오버레이 된 머리글 이미지의 높이에 관계없이 항상 멋지게 나타납니다.

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

어떤 제안?

Answer 1

첫 번째 대답 here은 본질적으로 질문에 대한 답변입니다. 수직 센터링 만 필요하기 때문에 다음을 제거해야합니다.

top: 50%;