如何將圖像中心對齊文本？

Question

我希望把文本圖像

該中心是我想要的東西：

這是我有：

請指引我，我的代碼如下：

.h3-dis { 
 
    position: absolute; 
 
    width: 100%; 
 
    font-size: 18px; 
 
    color: #fff; 
 
    font-weight: normal; 
 
    padding: 10px; 
 
    background: rgba(0, 0, 0, 0.31); 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    z-index: 1; 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 
.op-img { 
 
    position: inherit; 
 
    opacity: .5; 
 
}

<a href="#"> 
 
    <div class="h3-dis">Description</div> 
 
    <img src="img/small-1.png" class="op-img img-responsive"> 
 
</a>

Answer 1

試試這個：

.h3-dis { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

Answer 2

看看這個小提琴：http://jsfiddle.net/NayanaDas/cuyWT/372/

CSS：

.imgContent { 
    width: 1060px; 
    height:auto; 
    margin: auto; 
    text-align:center; 
    position:relative; 
} 
.h3-dis { 
    position: absolute; 
margin: auto; 
    top: 0; 
    left:0; 
    right:0; 
    bottom:0; 
    color:blue; 
    height:100px; 
    font-size: 20px; 
} 

HTML：

<div class="imgContent"> 
    <a href="#"> 
     <img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="1035" height="400"> 
     <div class="h3-dis">My Description</div> 
    </a> 
</div>