Question

我正在创建一个只播放视频的超级基本网页，它会在除了Safari之外的每个浏览器的页面中心对齐，并将其推到左下角。

<!DOCTYPE html>
<html>
<link rel='stylesheet' href='style.css'/>
<head>
    <title> page title </title>
    <link rel="icon" type="image/png" href="favicon.png"/>
</head>

<body bgcolor="#000000">

<div class="video">
<iframe src=" /*i'm not including the video link for privacy reasons*/ width="700" height="525"     frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

</body>

<style type="text/css">
.video {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: auto;
  margin-right: auto;
  transform: translate(-50%, -50%);
}
</style>

</html>

之前有没有人遇到这个问题？这似乎很基本，但我不知道它为什么不起作用。

Answer 1

transform属性仅适用于具有-webkit-前缀的Safari：

.video {
   position: fixed;
   top: 50%;
   left: 50%;
   margin-left: auto;
   margin-right: auto;
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

FIDDLE

您可以参考Can I Use查看浏览器支持

中心对齐html5视频在Safari中无效

1 个答案: