居中对齐 html5 视频在 Safari 中不起作用

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 中不起作用

center align html5 video doesn't work in Safari

html

safari