垂直和水平居中與在safari中的flexbox

Question

我正在垂直和水平居中div，但在Safari中無法正常工作。

鉻：

的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> a min-height。我的個人偏好是100vh（視區高度）。