当div背景图像响应时，在div中垂直和水平居中显示文本

我想知道当高度可调时我如何将我的h2对准div的中心。当我的像素高度为px时，我知道该怎么做。然后我就这样写

 height: 300px;
 display: flex;
 align-items: center;

但是我不知道如何在响应式div图像中执行此操作。

这是我的代码http://www.bootply.com/yr5KNSM17S#，这就是我希望我的文本成为http://www.bootply.com/HIbKwupnLb的方式

抱歉，如果不清楚。

<div id="mainHeaderWrapper">
   <img src="http://placehold.it/1500x400/cf5">
   <div>
          <h2 class="vit text-center">Testing text</h2>
   </div>
</div>




#mainHeaderWrapper{
    position:relative;
    background: no-repeat url(http://placehold.it/1500x400/cf5) 50% / 100%;
}
#mainHeaderWrapper > img{
    vertical-align: top;
    width: 100%; /* max width */
    opacity: 0;  /* make it transparent */
}
#mainHeaderWrapper > div{
    position: absolute;
    top: 0;
    width:100%;
    height:100%;
}

#mainHeaderWrapper h2{
 align-items: center;
}

h2.vit{
    color: white;
    font: 900 24px/24px "Raleway",Helvetica,Arial,sans-serif !important;
    background: rgba(0, 0, 0, 0.5);
    text-shadow: 2px 2px 4px #000000;
    padding: 10px 15px;
    z-index: 1; 
    }