Flexbox的中心在Safari

下面的代码在Chrome和Safari除外大部分现代浏览器垂直和水平方向为中心的视频里它只是垂直居中：Flexbox的中心在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/

来源

2016-07-22 Greg Pagendam-Turner

如果我拿出了：保证金权：汽车; margin-left：auto; 从.container Chrome显示与Safari 相同我找不到任何相关的错误：https://github.com/philipwalton/flexbugs –

您可能需要为Safari添加供应商前缀：http：// stackoverflow。 com/a/35137869/3597276 –

-3

删除视频容器的风格和改变其他样式：

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

来源

2016-07-26 00:44:36

没有试图解释为什么这个答案对未来的开发人员没有太大用处 –

Hi Toni，你有什么问题吗？ –

我在其他问题中找到了答案，因为它发生了 - 在Stack Overflow上最好解释你为什么解决了这个问题 - 这样OP和其他读者就可以获得在问题范围之外有用的知识，而不是切割并粘贴解决方案，他们可能不明白 - 例如，对于我自己的问题，这是类似的，但不一样的OP，这是没用的，因为我不知道哪些位固定在问题中的问题或为什么 –

Flexbox的中心在Safari

回答

相关问题