带有(垂直和水平)居中文本的悬停框

Question

我为客户端制作了一个用于图像拼接的悬停信息框.当这个人盘旋图像时(不同的方向,所以它的灵活大小),他会在另一个div上方获得一些信息.灵活性是问题:我希望div垂直和水平的内容居中.目前它看起来像这样:

.linkbox {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 1.9em;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
}

但我希望这些东西出现在盒子的中间.所以我的第一个想法是:padding-top:40%;和(或许!？)50%的高度,其余的信息.我知道我必须以%表示这个大小,但那只是粗略的.你有什么主意吗？

该项目在这里:http://www.davidgoltz.de/2011/archive/

Answer 1

你看看这个：链接 http://jsfiddle.net/qfXVa/2/

div.linkbox {
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    display: table;
    vertical-align: middle;
}

div.linkbox div {
    display: table-cell;
    vertical-align: middle;
}

我基本上为文本内容设置了一个容器，并将其垂直和水平居中对齐到父级。