Safariのフレックスボックスを使用した縦横のセンタリング

Question

私は縦と横のdivをセンタリングしていますが、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> 

これがすべてです。

---

初期の答え：

それはサファリのすべてのバージョンで動作しなければならない場合、あなたはボックスモデルに戻す必要があります：

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（ビューポートの高さ）です。