在DIV中居中文本

Question

我試圖在DIV中居中文本，而不僅僅是水平方向，而是垂直方向 - 我已經玩了很長時間的CSS，並且似乎無法使其工作 -

我的代碼是在這裏：http://jsfiddle.net/K2sys/46/

h6 { 
    font-size: 32px; 
    color: #FFFFFF; 
} 

h6:hover { 
    color: #000000; 
} 

.griditem { 
    position: relative; 
    display:inline-block; 
    margin-right: 17px; 
    margin-bottom: 17px; 
    background-color: #777; 
    width: 32%; 
    height: 500px; 
    max-width: 612px; 
    min-width: 389px; 
    text-align: left; 
} 

.titles { 
    padding: 0px; 
    bottom: 0px; 
    position: absolute; 
    left: -1px; 
    right: -1px; 
    top: -1px; 
    -moz-border-radius: 1px 1px 0 0; 
    border-radius: 1px 1px 0 0; 
    text-align: center; 
    display: none; 
    background: rgba(0, 0, 0, 0.5); 
    -moz-border-radius: 1px 1px 0 0; 
    border-radius: 1px 1px 0 0; 
    vertical-align: middle; 
} 

.griditem:hover > .titles { 
    display: block; 

} 
​ 


<a class="griditem" href="http://www.bbc.co.uk" style="background-image:url('http://news.bbcimg.co.uk/media/images/64623000/jpg/_64623471_clinton_pa.jpg'); background-size:100% 100%;\"> 
<div class="titles"> 
<h5>Title</h5><h6>Subtitle</h6> 
</div></a> 

可有人告訴我，我要去哪裏錯了嗎？

基本上我想'Title'&'Subtitle'在翻轉時位於'.griditem'框的中心。我確信這很簡單，但我一直盯着這麼久，現在我忽略了明顯的...任何幫助將不勝感激！

謝謝！

Answer 1

可以水平居中文本與text-align:center;但對齊垂直您需要在未來2行添加到div

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