CSS文本垂直对齐中间

Question

我有问题 我正在尝试将鼠标悬停在图像上。 我在div中有一些文字。 现在，我希望文本以div为中心。 我用了：

display: table-cell;
vertical-align: middle;

文本几乎在Div的中间。 当我向其中添加更多文本时，您将看到文本未居中。

实时示例： http ： //jsfiddle.net/DennisBetman/6TkkE/

希望你们中的一些人知道问题所在并能对我有所帮助。

Answer 1

您已将<h1>设置为position:absolute ，但是没有相对于它定位的容器。

我的position:absolute是<h1> position:absolute和height:100% 。 然后我添加了position:relative对于它的容器.text

这是显示此的小提琴： http : //jsfiddle.net/6TkkE/5/

Answer 2

这是一个不错的解决方法，它对我的​​目的很好用：获取一个您大小的容器（相对来说也很好）。 使其相对位置，在其中以绝对位置放置一个跨度或p。 给它一个行高，也许是30px。 取决于您的字体大小。 然后将其居中与左侧和顶部居中，固定边距，并且宽度必须为100％才能应用text-align：center。

.container {
    position: relative;
    width: 800px;
    height: 600px;
}
.container > span {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -15px;
    margin-left: -50%;
    line-height: 30px;
    width: 100%;
    text-align: center;
}
...
<div class="container">
    <span>Vertical and Horizontal align.</span>
</div>

对我来说很好！