title: Why is flexbox code not working in Safari 5 and 6?
body: <p>I used flexbox and autoprefixer to align a lot of stuff on <strong><a href="http://codeandcode.co/demo/Ubitoyz/html/V1/" rel="nofollow noreferrer">this website</a></strong>.</p>
  <p>Now in spite of me using autoprefixer, my client sent me the following screenshots of one of the sections:</p>
  <p><a href="https://i.stack.imgur.com/kgzrJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kgzrJ.png" alt="enter image description here" /></a></p>
  <p>As you can see the images are not aligned in the center of the circle. This is not the case in all of the recent browsers, including IE 10+.</p>
  <p>From what I could gather after visiting multiple SO threads, even Safari 5+ supports flex with prefixes. So I have no idea why my flex code is not working.</p>
  <p>The HTML:</p>
  <pre><code>&lt;figure class=&quot;focus-point&quot; data-animation=&quot;fadeInUp&quot; data-animation-delay=&quot;0.2&quot;&gt;
      &lt;a href=&quot;&quot;&gt;
          &lt;img src=&quot;images/focus-feature-points/2.jpg&quot; alt=&quot;focus point&quot;&gt;
      &lt;/a&gt;
      &lt;figcaption&gt;
          &lt;h3&gt;Engaging Educational Games&lt;/h3&gt;
      &lt;/figcaption&gt;
  &lt;/figure&gt;
  </code></pre>
  <p>And the CSS for the <code>&lt;a&gt;</code> tag is as follows:</p>
  <pre><code>.focus-point &gt; a {
      overflow: hidden;
      position: relative;
      border-radius: 50%;
      border: 3px solid;
      display: inline-block;
      height: 260px;
      width: 260px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      margin-left: auto;
      margin-right: auto;
      -webkit-transition: all .3s;
      transition: all .3s;
  }
  </code></pre>
  <p>The version of Safari my client is using is 5.1.10.</p>
  <p>Why in spite of me using prefixed code, my flexbox code still does not work?</p>
  <p>I am also aware that some advanced flexbox properties might have problems in older browsers that do support flexbox partially (eg. <code>flex-wrap</code>), but as you can see I have only used the most basic flexbox properties in this example of mine.</p>
  <p>What am I doing wrong?</p>