title: Bootstrap Responsive Multiline text overlay
body: <p>I am trying to add a text overlay to my images, but I am struggling making it responsive, and vertically centered. </p>
  
  <p>Here is where I got : <a href="http://jsfiddle.net/r8rFc/910/" rel="nofollow">http://jsfiddle.net/r8rFc/910/</a></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>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...</p>
  
  <p>Thanks !</p>