如何文字对齐图像中心？

Question

我想将文字放在图像的中心

这就是我想要的：

这就是我所拥有的：

请指导我，我的代码如下：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

查看这个小提琴：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>

Answer 2

试试这个：

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