html - 在 Safari 中使用 flexbox 进行垂直和水平居中

Question

我将一个 div 在垂直和水平方向居中，但在 Safari 中不起作用。

Chrome:

Safari

看一个例子: http://ux-heuristics.webflow.io/

Answer 1

我刚刚检查了您网站的来源。你的标记是错误的。你需要把每一个
<a class="play-btn w-inline-block" href="#"></a>里面对应的链接
<div class="visibility-content"></div> .

将它添加到你的 CSS 中

.visibility-content {
  position: relative;
}
.visibility-content .play-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
     -moz-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
       -o-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

每个部分的标记应如下所示:

<div class="section-content">
    <h2 class="section-title">Visibility of system status</h2>
    <p class="section-description">The system should always keep users informed 
    about what is going on, through appropriate feedback within reasonable time.</p>
    <div class="visibility-content">
        <a class="play-btn w-inline-block" href="#"></a>
        <div class="visibility-content-top"></div>
        <div class="visibility-bottom"></div>
    </div>
</div>

这就是全部。

---

初始答案:

如果它必须在所有版本的 Safari 中工作，您需要恢复到盒子模型:

body { margin: 0;} /* You don't need this rule, it's just for SO snippet */

parent {
  min-height: 100vh;
  display: block;
  position: relative;
}
child {
  position: absolute;
  display: inline-block;
  padding: 3rem;
  max-width: 100vw;
  max-height: 100vh;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border: 1px solid red;
  overflow-x: hidden;
  overflow-y: auto;
}

<parent>
  <child>I am centered in all browsers. Yay!</child>
</parent>
<parent>
  <child>I am centered in all browsers. Yay!</child>
</parent>
<parent>
  <child>I am centered in all browsers. Yay!</child>
</parent>
<parent>
  <child>I am centered in all browsers. Yay!</child>
</parent>
<parent>
  <child>I am centered in all browsers. Yay!</child>
</parent>

唯一的问题是您需要提供 <parent>一个min-height .我个人的喜好是100vh (视口(viewport)高度)。