相对位置父项内垂直居中的绝对位置 div - 在 Chrome 中工作，但在 Safari 等中以正文为中心？答案

【问题标题】：Vertically centered absolute position div inside relative position parent - Works in Chrome, but centers to body in Safari etc?相对位置父项内垂直居中的绝对位置 div - 在 Chrome 中工作，但在 Safari 等中以正文为中心？
【发布时间】：2011-10-28 02:33:47
【问题描述】：

我正在尝试将一些文本垂直居中显示在鼠标悬停上的图像上。我已经找到了一个可以在 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();
    });
});

【问题讨论】：

OK：更新css使.content具有固定高度，它可以工作，但是由于这个div将具有动态高度的对象，有没有办法在不指定高度的情况下实现这种效果？ jsbin.com/iceroq/2

标签： javascript html css positioning vertical-alignment

【解决方案1】：

我编辑了你的 jsbin：http://jsbin.com/iceroq/3

所有修改都是对.content-text a 的CSS 更改。使链接绝对定位并给它一个height 可以让你知道margin-top 给它什么（高度的一半）。

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

【讨论】：