css - 垂直居中对齐

Question

我有一个常见问题，尽管我无法通过在 Stack Overflow 上找到的其他解决方案来解决它。我正在尝试垂直对齐覆盖在标题中高度未知的图像上的徽标和搜索栏（因为当浏览器宽度减小时图像会缩小，因为它是响应式的）

挑战是：

1. 我在一个 div 块中有一个标题图像（img，不是 CSS 背景图像），在其他两个 div 块中有一个徽标和搜索栏，需要覆盖在背景图像上。
2. 标题图像将随着浏览宽度的减小而缩小，因为它是一个响应式站点。这意味着我不知道标题的高度。
3. 徽标将向左浮动，搜索栏向右浮动。
4. 我需要以某种方式将徽标和搜索栏垂直居中，以便它们始终看起来很好，无论它们覆盖的标题图像的高度如何。

示例：http ://www-dev.channelaustin.org/about

有什么建议吗？

Answer 1

这里的第一个答案，基本上回答了你的问题。由于您只想要垂直居中，您应该删除：

top: 50%;