Bootstrap响应式多行文字叠加

Question

I am trying to add a text overlay to my images, but I am struggling making it responsive, and vertically centered.

Here is where I got : http://jsfiddle.net/r8rFc/910/

.img-overlay {
    position: relative;
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41,128,185,0.9);
    color: #fff;

}

.centered-text
{
  display:table;
  height:100%;
  width:100%;
  text-align:center;
  vertical-align:center;
}

I am able to center the text horizontally, but I cannot make it vertically... I really have no clue how to do that. All I checked was either non responsive, or it was just a logo at the center of the overlay...

Thanks !

Answer 1

Thanks to Henrique Barcelos, I have been able to solve the issue. Here is the fiddle giving the solution : http://jsfiddle.net/r8rFc/912/

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41,128,185,0.9);
    color: #fff;
    display:flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;

}

Answer 2

How about setting .project-overlay as such

.project-overlay {
    position: absolute; 
   top: 45%; 
   left: 0;
   text-align: center; 
   width: 100%; 
    background-color: rgba(41,128,185,0.9);
    color: #fff; 
}

With this you can try setting a wrapper div to set the background color to whatever color it is that you want