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> 

은 아무도 말해 줄 수 있습니까?

기본적으로 '제목'& '자막'이 롤오버 할 때 '.griditem'상자의 가운데에 있어야합니다. 나는 이것이 정말로 간단하다라고 확신한다. 그러나 나는 이것에 관해 꼼짝 않고 바라보고 있었다. 나는 명백한 것을 멀리 바라보고있다. .. 어떤 도움이라도 크게 인정 될 것이다!

감사합니다.

Answer 1

당신은 수직이

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