Vertikale und horizontale Zentrierung mit Flexbox in Safari

Question

Ich zentriere ein Div in vertikal und horizontal, aber in Safari nicht funktionieren.

Chrome:

Safari

ein Beispiel Siehe: http://ux-heuristics.webflow.io/

Answer 1

Ich habe gerade die Quelle Ihrer Website überprüft. Ihr Markup ist falsch. Sie müssen jede
<a class="play-btn w-inline-block" href="#"></a> Verbindung innerhalb ihrer entsprechenden
<div class="visibility-content"></div> setzen.

als diese

.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%); 
} 

Das Markup jeden Abschnitt zu Ihrem CSS hinzufügen sollte wie folgt aussehen:

<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> 

Das alles ist.

---

Erste Antwort:

Wenn es in allen Versionen von Safari arbeiten müssen, müssen Sie auf die Box-Modell zurückzukehren:

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>

Die Das einzige Problem ist, dass Sie <parent> eine min-height geben müssen. Meine persönliche Präferenz ist 100vh (Ansichtsfensterhöhe).