以 Safari 为中心的 Flexbox
Posted
技术标签:
【中文标题】以 Safari 为中心的 Flexbox【英文标题】：Flexbox centering on Safari 【发布时间】：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 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 添加供应商前缀：***.com/a/35137869/3597276 【参考方案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 相似但不同，这是没有用的，因为我不知道哪些位解决了问题在问题或为什么以上是关于以 Safari 为中心的 Flexbox的主要内容，如果未能解决你的问题，请参考以下文章
Flexbox justify-content：中心在 Safari 中无法正常工作
绝对定位容器中 Ipad 垂直中心上的 IOS Safari