Flex Wrap + TransformY 在 Safari 中不起作用

Question

所以我使用 Flex-Wrap 将我的许多 Bootstrap 3 列保持在彼此相同的高度。但是，当我想在它自己的列中垂直和水平居中该内容时，我使用这个典型的代码：

.equal {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.centered {
  position: relative;
  float: left;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

虽然这在 Opera、Firefox、Chrome 和 Internet Explorer/Edge 中运行良好。是 Safari 拒绝打球并弄乱了转换代码的 transformY 段。

我已附上 CodePen example 供您查看具体情况。

Answer 1

tldr; CodePen example

这里有几件事我会考虑。

首先，flexbox 和定位在紧密结合使用时会有一些怪癖——尤其是与 Safari 一起使用时。这里的大部分问题都已解决，但我仍然不时遇到一些小而令人沮丧的事情。

其次，您似乎正在使用自己的一些代码来复制 Bootstrap 中已经存在的内容，这可能会混淆问题。

我已经构建了我的示例代码，并且模糊地使用了您在 Bootstrap 4 中可以找到的 flex 类，这样您可以在迁移时减轻负担。

从我的角度来看，这里的一般概念：

<div class="container">

    <div class="row d-flex">
    <!-- Make the row a flex wrapper, this will make columns the same height -->

        <div class="col d-flex">
        <!-- Make each col a flex wrapper, to use flex properties to dynamically center content -->
        </div>
        <div class="col d-flex">
        </div>
        <div class="col d-flex">
        </div>
    </div>
</div>