Flexbox-Zentrierung auf Safari

Des folgenden code-Zentren ein video vertikal und horizontal in Chrom und die meisten modernen Browser außer Safari, wo es ist nur vertikal zentriert:

<!DOCTYPE html>
<html lang="en">  
  <head>    
    <meta charset="utf-8">    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->    
    <meta name="description" content="">    
    <meta name="author" content="">    
    <link rel="icon" href="favicon.ico">    
    <title>Rick
    </title>    
    <!-- Bootstrap core CSS -->    

<!-- from bootstrap 4 -->
    <style type="text/css">
    body {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 1rem;
        line-height: 1.5;
        color: #373a3c;
        background-color: #fff;
    }

    body {
        margin: 0;
    }

    .container {
        margin-right: auto;
        margin-left: auto;
    }
    </style>

<!-- site custom styles -->
    <style>

    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0px;
        overflow: hidden;
    }


    .content {
        flex: 1 0 auto;
        justify-content: center;
        align-content: center;
        display: flex;
        flex-direction: column;
        border: 10px solid pink;
    }

    .video-container {
        height: 100%;
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }

    </style> 
  </head>  
  <body>  
    <!-- Begin page content -->    
    <div class="content container">      
          <div class="video-container">                        
            <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&controls=0" frameborder="0" allowfullscreen="">
            </iframe>        
          </div>      
    </div>    
  </body>
</html>

Was mache ich falsch?

Gleichen code in ein Turnschuh: https://jsfiddle.net/netroworx/tyet04uz/

Wenn ich das: margin-right: auto; margin-left: auto; Aus .container-Chrome zeigt dasselbe wie Safari konnte ich nicht finden alle relevanten Fehler auf: github.com/philipwalton/flexbugs
Möglicherweise müssen Sie hinzufügen vendor-Präfixe für die Safari: stackoverflow.com/a/35137869/3597276

InformationsquelleAutor Greg Pagendam-Turner | 2016-07-22

  1. -3

    Entfernt video-container-Stil und geändert anderen Stilen:

    body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        min-height: 100vh;
        margin: 0px;
        overflow: hidden;
      }


      .content {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-direction: row /* works with row or column */
        flex-direction: row;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        justify-content: center;
        border: 10px solid pink;
      }
    Keinen Versuch zu erklären, warum Mittel, diese Antwort wird nicht viel nutzen für zukünftige Entwickler
    Hi Toni, haben Sie Fragen?
    Ich fand Antworten auf andere Fragen, wie es geschieht - es ist am besten auf Stack Overflow, zu erklären, warum das, was Sie getan hat das problem behoben -, dass die Art und Weise der OP und die anderen Leser bekommen das wissen, das nützlich ist, außerhalb der Tragweite des Problems, sondern als eine cut-und paste-Lösung, die Sie vielleicht nicht verstehen - zum Beispiel, für mein eigenes problem, die war ähnlich aber nicht das gleiche wie der OP, das war keine Verwendung, da ich nicht weiß, welche bits behoben, das problem in die Frage oder warum
    Es funktioniert immer noch nicht.

    InformationsquelleAutor Greg Pagendam-Turner

Schreibe einen Kommentar