为什么简单的flexbox居中代码在Safari 5和6中不起作用？

Question

我最近建立了这个网站HERE，我使用flexbox和autoprefixer来对齐这个网站上的很多东西。

现在，尽管我使用autoprefixer，我的客户端发送了以下其中一个部分的屏幕截图：

如您所见，图像未在圆心对齐。在所有最近的浏览器和IE 10+中都不是这种情况，在最近的浏览器中一切正常。

在访问多个SO线程之后，我可以收集的是，甚至Safari 5+也支持带前缀的flex。所以我不知道为什么我的flex代码不起作用。

HTML：

<figure class="focus-point" data-animation="fadeInUp" data-animation-delay="0.2">
    <a href="">
        <img src="images/focus-feature-points/2.jpg" alt="focus point">
    </a>
    <figcaption>
        <h3>Engaging Educational Games</h3>
    </figcaption>
</figure>

<a>标签的CSS如下：

.focus-point > 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;
}

我客户端使用的Safari版本是5.1.10。

为什么尽管我使用前缀代码，我的flexbox代码仍然不起作用？

我也知道一些高级的flexbox属性可能会在部分支持flexbox的旧浏览器中出现问题（例如.flex-wrap），但是你可以看到我在这个例子中只使用了最基本的flexbox属性。

我究竟做错了什么？