Question

以下代码在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/

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

Flexbox以Safari为中心

1 个答案: