css - 垂直对齐图像叠加中的文本

Question

在使用响应式图像叠加图像时无法获得所需的效果。我想要的是将鼠标悬停在图像上时，色 block 和文本显示如图所示，但文本位于 div 的垂直中心。我尝试过垂直中间，但似乎不起作用。无法根据需要折叠和展开宽度和高度设置值。如果有人可以提供帮助，我将不胜感激。谢谢

代码，CSS如下

.overlay-box {
   position: relative;
}
.overlay {
  display: none;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(38,150,198,0.5);
}
.overlay p {
   color: #ffffff;
   text-align: center;
}
.overlay-box:hover .overlay {
     display: block;
}

<div class="row">
  <div class="col-xs-12 col-sm-4 col-md-3" style="margin-bottom: 20px;">

      <div class="overlay-box">
            <a href="#" target="_blank">
              
                   <div class="overlay">
                   
                          <p>1st line<br>2nd line<br><br>
                          3rd line</p>
                   </div>
                <img src="http://placehold.it/2000x2000" class="img-responsive "/></a>


      </div>

  </div>

  </div>

Answer 1

img{
max-width: 100%;
height: auto;
}
.overlay-box {
   position: relative;
}
.overlay {
  display: none;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(38,150,198,0.5);
}
.overlay:before {
content: '';
display: inline-block;
width: 1px;
height: 100%;
vertical-align: middle;
border: 1px solid;
}
.overlay p {
   color: #ffffff;
   text-align: center;
display: inline-block;
vertical-align: middle;
width: 90%;
}
.overlay-box:hover .overlay {
 display: block;
}

<div class="row">
  <div class="col-xs-12 col-sm-4 col-md-3" style="margin-bottom: 20px;">

  <div class="overlay-box">
        <a href="#" target="_blank">
          
               <div class="overlay">
               
                      <p>1st line<br>2nd line<br><br>
                      3rd line</p>
               </div>
            <img src="http://placehold.it/2000x2000" class="img-responsive "/></a>


  </div>

  </div>

  </div>