title: center align html5 video doesn't work in Safari
body: <p>I'm making a super basic webpage that just plays a video, and it aligns in the very center of the page for every browser except Safari, where it is pushed to the bottom left. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;link rel='stylesheet' href='style.css'/&gt;
  &lt;head&gt;
      &lt;title&gt; page title &lt;/title&gt;
      &lt;link rel="icon" type="image/png" href="favicon.png"/&gt;
  &lt;/head&gt;
  
  &lt;body bgcolor="#000000"&gt;
  
  &lt;div class="video"&gt;
  &lt;iframe src=" /*i'm not including the video link for privacy reasons*/ width="700" height="525"     frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;style type="text/css"&gt;
  .video {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: auto;
    margin-right: auto;
    transform: translate(-50%, -50%);
  }
  &lt;/style&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Has anyone run into this problem before? It seems pretty basic, but I just don't know why it's not working.</p>