title: Flexbox justify-content: center not working properly in Safari
body: <p>I'm having trouble getting flexbox and <code>justify-content: center</code> to play nicely in Safari.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="flex-row"&gt;
    &lt;div class="label"&gt; Label &lt;/div&gt;
    &lt;div class="well"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  
  .well {
    width: 230px;
    height: 200px;
    background-color: grey;
  }
  
  .label {
    z-index: 2;
    position: absolute;
    margin-top: -8px;
  }
  </code></pre>
  
  <p>In Chrome and FF this gives a simple grey well, with a label centered above it. In Safari however the label does not center. Open the CodePen example below in Safari to see the uncentered label:</p>
  
  <p><a href="https://codepen.io/jklevin/pen/weLvxx" rel="nofollow noreferrer">https://codepen.io/jklevin/pen/weLvxx</a></p>
  
  <p>My hunch is that this is due to an implementation bug in Safari, but curious if anyone knows of an existing workaround.</p>