以 Safari 为中心的 Flexbox答案

【问题标题】：Flexbox centering on Safari以 Safari 为中心的 Flexbox
【发布时间】：2016-11-26 04:50:03
【问题描述】：

以下代码在 Chrome 和大多数现代浏览器中垂直和水平居中视频，但 Safari 除外，它只是垂直居中：

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

我做错了什么？

小提琴中的相同代码：https://jsfiddle.net/netroworx/tyet04uz/

【问题讨论】：

如果我取出：margin-right: auto;左边距：自动；从 .container Chrome 显示与 Safari 相同，我在以下位置找不到任何相关错误：github.com/philipwalton/flexbugs
您可能需要为 Safari 添加供应商前缀：stackoverflow.com/a/35137869/3597276

标签： css twitter-bootstrap safari flexbox

【解决方案1】：

移除视频容器样式并将其他样式更改为：

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

【讨论】：

没有试图解释为什么意味着这个答案对未来的开发人员没有多大用处
嗨，托尼，您有什么问题吗？
我找到了其他问题的答案——最好在 Stack Overflow 上解释为什么你做了什么解决了这个问题——这样 OP 和其他读者就可以获得超出范围的有用知识问题，而不是他们可能不理解的剪切和粘贴解决方案 - 例如，对于我自己的问题，这与 OP 相似但不同，这是没有用的，因为我不知道哪些位解决了问题在问题或为什么