<分区>
我为客户制作了一个图像马赛克的悬停信息框。当人们将鼠标悬停在图像上时(不同的方向，因此它的大小灵活)，他会在图像上方看到另一个 div 并包含一些信息。灵 active 是问题所在:我希望 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://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;
}
我基本上为文本内容设置了一个容器，并将其垂直和水平对齐到父元素的中间。
关于css - 具有(垂直和水平)居中文本的悬停框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7040879/