div内のキャプションがオーバーレイとして使用されました。どのようにテキストをその中心に置くことができますか？

Question

私の人生のために、イメージがぶら下げられたときに、キャプションテキストを中央に置く方法を理解できません。私は垂直方向のアラインメントを試み、インラインブロックとして指定し、別のポジショニングで再生しました。私は何かが明らかに欠けているように感じる。

https://jsfiddle.net/b5tmndvk/2/

HTML

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6 col-md-offset-3"> 
     <div class="unit-thumbnail"> 
     <img src="http://i.imgur.com/yIKP2YB.jpg?1" width="100%"> 
     <div class="unit-caption"> 
      <p>Updoot this Stack Overflow post and help me figure this out.</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

.unit-thumbnail { 
    position:relative; 
    overflow:hidden; 
} 

.unit-caption { 
    position:absolute; 
    bottom:-100%; 
    right:0; 
    background:rgba(37, 139, 202, 0.75); 
    width:100%; 
    height:100%; 
    padding:2%; 
    text-align:center; 
    color:#fff !important; 
    z-index:2; 
    -webkit-transition: all 0.9s ease-in-out; 
    -moz-transition: all 0.9s ease-in-out; 
    -o-transition: all 0.9s ease-in-out; 
    -ms-transition: all 0.9s ease-in-out; 
    transition: all 0.9s ease-in-out; 
} 
.unit-thumbnail:hover .unit-caption { 
    bottom:0%; 
} 

Answer 1

このCSSを追加

.unit-caption p{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

https://jsfiddle.net/b5tmndvk/3/