在相對位置父級中垂直居中的絕對位置div-在Chrome中工作，但在Safari中居中到主體等？

Question

我試圖將一些文本垂直居中放置在鼠標懸停在圖像上。 我已經找到了可以在Mac（10.7.2）上與chrome（15.0.874.106）一起使用的解決方案，但是在Safari（5.1.1）中似乎有問題，奇怪的是，它們都基於webkit。 我相信在Firefox中也有同樣的問題。

文本在chrome中相對於父div垂直居中，但在Safari中似乎居中於正文或窗口。 我做錯了什么，還是有人有更好的解決方案？

jsbin： http ：//jsbin.com/iceroq

CSS：

.content {
    width: 300px;
    position: relative;
}
.content-text {
    width: 100%;
    height: 100%;
    background: black;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    display: none;
}

HTML：

<div class="content">
    <div class="content-image">
        <img src="http://placehold.it/300x500/E01B4C" />
    </div>
    <div class="content-text">
        <a href="http://www.google.com">Google</a>
    </div>
</div>
.content-text a {
    color: white;
    position: relative;
    top: 50%;
    margin-top: -0.5em;
}

JS：

$(document).ready(function() {
    $('.content').hover(

    function() {
        $(this).children('.content-text').show();
    }, function() {
        $(this).children('.content-text').hide();
    });
});

Answer 1

我編輯了您的jsbin： http ://jsbin.com/iceroq/3

所做的所有修改都是CSS對.content-text a更改。 絕對確定鏈接的位置並為其設置height可以讓您知道要為其指定的margin-top （高度的一半）。

.content-text a {
  display: block;
  width: 100%;
  height: 20px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  color: white; 
}