title: How to center absolutely positioned children of a flex container in Safari?
body: <p>I have a container that contains both an image, and some text. I want the text to be vertically and horizontally centered in the middle of the image.</p>
  
  <p>It seems that the easiest, forward-thinking method is to use Flexbox and absolute positioning of the text:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  
  .text {
    position: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='container'&gt;
    &lt;div class='text'&gt;
      This should be centered
    &lt;/div&gt;
    &lt;img src="https://placehold.it/250x250" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The text is centered in both axes. This seems to work in all modern browsers..... except Safari.</p>
  
  <p>Safari appear to not center the text at all. It's just sitting at the top/left of the container like a normal absolutely positioned element would be in a non-flexbox layout.</p>
  
  <p>Safari (wrong):</p>
  
  <p><a href="https://i.stack.imgur.com/vwe9y.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vwe9y.png" alt="enter image description here"></a></p>
  
  <p>All other browsers (correct):</p>
  
  <p><a href="https://i.stack.imgur.com/Ys8Tw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Ys8Tw.png" alt="enter image description here"></a></p>
  
  <p>I thought Flexbox was really ready for primetime, but this seems like a deal-breaker considering how many people using Safari on iOS. Centering content horizontally and vertically is something Flexbox should be great at.</p>
  
  <p>My only real alternative here is to not use Flexbox and then use:</p>
  
  <pre><code>.text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
  </code></pre>
  
  <p>But I would much rather be using Flexbox for progressive reasons.</p>
  
  <p>Is there anything I'm missing here? As much as I hate to ask for it, is there some of Safari-only work-around here? Is there any solution to this besides just "not using flexbox" because if that is the answer in mid-2017 that is going to be disappointing.</p>
  
  <p>JSFiddle for reference: <a href="https://jsfiddle.net/z7kh5Laz/4/" rel="noreferrer">https://jsfiddle.net/z7kh5Laz/4/</a></p>