title: Vertically centered div go out of the background
body: <p>I  centered a div vertically with CSS and it works great. But I have a background and when I resize browser the text go out the background.</p>
  
  <p><a href="https://i.stack.imgur.com/jDJ9a.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jDJ9a.jpg" alt="enter image description here"></a></p>
  
  <pre><code>.wrapper{
      height: 100%;
      width: 100%;    
      background: rgba(51,51,51,.5);
  }
  
  
  .outer {
      display: table;
      position: absolute;
      height: 100%;
      width: 100%;
  }
  
  .middle {
      display: table-cell;
      vertical-align: middle;
  }
  
  .inner {
  
      margin-left: auto;
      margin-right: auto; 
      width: 50%;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/5t9asdc1/1/" rel="nofollow noreferrer">jsfiddle</a></p>