css - 响应式布局中的中心图像

Question

我正在尝试设置一个响应式 header ，它可以获取图像并根据浏览器调整其大小——非常简单。我无法实现的是将图像在其容器内垂直居中(在本例中为 a 元素)

看例子: http://jsfiddle.net/jwoodcreative/tUW3k/

我尝试了一些无效的 css 技巧和一些 jQuery。如果有人知道，任何一种解决方案都适用。

Answer 1

你总是可以像这里一样使用 top:50%, bottom: 50% 技巧:jsfiddle v13

.outerElement {
    position: relative;
    height: XXpx;
    top: 50%;
}

.innerElement {
    position: absolute;
    bottom: 50%;
}

这是可行的，因为内部元素的高度与外部元素的高度不同，所以您可以将元素居中(如果高度相同，您只需将其再次定位到 pos:0)