Question

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

铬：

Safari浏览器

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（视口高度）。

在Safari中使用flexbox进行垂直和水平对中

1 个答案: