垂直對齊位置：絕對

Question

我正在嘗試在應用的<div>中居中對齊文本（可能或不可以跨越多行）。

請考慮以下標記：

<div class="item"> 
    <img src="test.jpg" /> 
    <div class="overlay"> 
     <a href="#">Some long content</a> 
    </div> 
</div> 

應用如下的CSS（請注意，這是不太版）：

.item { 
    position: relative; 

    img { 
     position: relative; 
     z-index: 1; 
    } 

    .overlay { 
     position: absolute; 
     z-index: 2; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     background: rgba(0,0,0,.5); 
     text-align: center; 

     a { 
      color: #fff; 
     } 
    } 
} 

除了被水平居中對齊，我想讓.overlay中的文字垂直對齊中間的文字。我嘗試添加以下內容：

.item { 
    display: table; 

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

我也試過inline-block，但沒有什麼幫助，因爲該元素是絕對定位。我不能在這裏使用通常的line-height技巧，因爲文本可能會跨越多行，而指定較大的行高將會破壞佈局。

有誰知道（相對）跨瀏覽器的方法來解決這個問題？它需要在IE9 +，FF和Chrome中工作。如果可能的話，我想避免添加任何額外的標記或「divitis」。

我放在一起的jsfiddle來證明我的問題（你還可以看到慣用的招數做工精細當position = absolute！）：

jsFiddle Demo

Answer 1

使用像:before一個僞元素和inline-block這樣：

.item .overlay:before { 
    content:" "; 
    display:inline-block; 
    vertical-align:middle; 
    height:100%; 
} 
.item .overlay a { 
    display:inline-block; 
    vertical-align:middle; 
    color: #fff; 
} 

入住這Demo Fiddle

_{您可能需要處理這些inline-block的項目HERE我用保證金右}

Answer 2

只是要絕對定位的元素一個「定位」容器之間的空間，並把實際元素的容器內，像這樣 - http://jsfiddle.net/Ggbtt/4/

HTML：

<div class="item"> 
    <img src="http://placehold.it/350x150.jpg" /> 
    <div class="overlay"> 
     <div class="inner-container"> 
      <div class="inner-cell"> 
       <a href="#">Some long content</a> 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

.item { 
    position: relative; 
    width: 350px; 
    display: table; 
} 
    .item .overlay { 
     position: absolute; 
     z-index: 2; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     background: rgba(0,0,0,.5); 
     text-align: center; 
     width: 100%; 
     height:100%; 
     vertical-align: middle; 
    } 
     .inner-container{ 
      width: 100%; 
      height: 100%; 
      display:table; 
     } 
     .inner-cell { 
      display:table-cell; 
      vertical-align: middle; 
      text-align: center; 
     } 
      .item .overlay a { 
       color: #fff; 
      } 

Answer 3

如果使用絕對位置，我覺得這個解決方案正常工作，每次

.item .overlay{ 
    top:50%; 
    -webkit-transform:translateY(-50%); 
}