html - CSS 文本垂直居中对齐

Question

我有问题。我正在尝试制作带有悬停的图像。我在 div 中有一些文本。现在我希望文本以 div 为中心。我用了：

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

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

现场示例：http: //jsfiddle.net/DennisBetman/6TkkE/

我希望你们中的一些人知道这个问题并且可以帮助我。

Answer 1

You made your <h1> have a position:absolute, but there was no container that it was positioned relative to.

I took position:absolute and height:100% off of the <h1>. then I added position:relative to its container .text

Here's the fiddle to show this: 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>

对我来说工作得很好！