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

Posted 2023-01-07

我最近建立了这个网站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属性。

我究竟做错了什么？

答案

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?

另一答案

尝试添加margin: auto，看看是否能解决问题。

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