twitter-bootstrap 以 Safari 为中心的 Flexbox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38523803/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox centering on Safari
提问by Greg Pagendam-Turner
The following code centers a video vertically and horizontally in Chrome and most modern browsers except for Safari where it is just centered vertically:
以下代码在 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>
What am I doing wrong?
我究竟做错了什么？
Same code in a fiddle: https://jsfiddle.net/netroworx/tyet04uz/
小提琴中的相同代码：https: //jsfiddle.net/netroworx/tyet04uz/
采纳答案by Greg Pagendam-Turner
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;
}
