CSS文本垂直對齊中間

Question

我遇到了問題。我試圖用懸停來製作圖片。我在div裏有一些文字。現在我想要文本以div爲中心。我用過：

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

文字幾乎在Div中間。當我添加更多文本時，您會看到文本不居中。

活生生的例子：http://jsfiddle.net/DennisBetman/6TkkE/

我希望你們中的一些認識問題，並能幫助我。

Answer 1

你讓你的<h1>有一個position:absolute，但沒有它被定位的容器。

我把position:absolute和height:100%關閉了<h1>。然後我加入position:relative到其容器.text

這裏是顯示這個小提琴： http://jsfiddle.net/6TkkE/5/

Answer 2

以下是此一個很好的解決辦法，它工作得很好我的目的：讓你的尺寸的容器中（相對是好的太）。使其位置相對，在絕對位置放置一個跨度或p。給它一個行高，也許30px。取決於你的字體大小。然後將它居中放置左邊和上邊，固定邊距，寬度必須爲100％才能應用文本對齊：居中。

.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> 

對我來說工作很好！