Greg Pagendam-Turner Greg Pagendam-Turner - 4 months ago 29
CSS Question

Flexbox centering on Safari

The following code centers a video vertically and horizontally in Chrome and most modern browsers except for Safari where it is just centered vertically:

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


What am I doing wrong?

Same code in a fiddle: https://jsfiddle.net/netroworx/tyet04uz/

Answer

Removed video-container style and changed other styles to:

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