title: How can I have a transparent overlay and center with flex box?
body: <p>I have a block element with a background image. I am attempting to:</p>
  
  <ul>
  <li>Add a transparent gradient overlay on top of a background image</li>
  <li>Center another block element using flexbox,</li>
  </ul>
  
  <p>I <strong>have already achieved both of these independently of each other</strong>, see the <a href="http://codepen.io/anon/pen/OVdmKP" rel="nofollow noreferrer">CodePen</a> as well as the images and code below. </p>
  
  <p>Using the transparent overlay (with the child block HTML removed):</p>
  
  <p><a href="https://i.stack.imgur.com/FQAqi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FQAqi.png" alt="enter image description here"></a></p>
  
  <p>Centering the child block (with the overlay CSS removed):</p>
  
  <p><a href="https://i.stack.imgur.com/ZmJlv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZmJlv.png" alt="enter image description here"></a></p>
  
  <p>However when I try and combine the effects, the flexbox stops working and the overlay is missing around the child block <a href="https://i.stack.imgur.com/9Eul8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Eul8.png" alt="enter image description here"></a></p>
  
  <p>Here is my HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;p&gt;title goes here&lt;/p&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>.container {
    background: url("http://msue.anr.msu.edu/uploads/images/forest.jpg");
    height: 400px;
    width: 100%;
    box-shadow: inset 0px -4px 14px 0px rgba(50, 50, 50, 0.71);
    background-size: 100% auto;
    z-index: 0;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .container p {
    display: block;
    color: red;
    text-align: center;
    font-size: 24pt;
    background-color: blue;
    z-index: 2;
  }
  .container:after {
    content: '';
    background: linear-gradient(135deg, #dc4225, #292484);
    width: 100%;
    height: 100%;
    opacity: 0.5;
    top: 0;
    left: 0;
    display: block;
    z-index: 1;
    position: relative;
  }
  </code></pre>
  
  <p><em>How can I get the semitransparent overlay overlay and the flexbox happening at the same time?</em></p>