为什么简单的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属性我的。

我做错了什么？

Answer 1

6.1之前的Safari版本支持previous version of the flexbox specification（source）。

对于Safari 5.0,5.1和6.0，除了display: -webkit-box（当时为display: flex）之外，您还需要使用-webkit-box-orient属性。

这告诉flex容器如何对齐它的子节点。

初始值为inline-axis。尝试使用vertical或horizontal。

这是规范中的详细信息部分： https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#orientation

此处有更多详情：Flexbox code working on all browsers except Safari. Why?

Answer 2

尝试添加margin: auto并查看是否可以解决问题。

https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6#.sbo7eyw65