title: how can i center an image over a video in html?
body: <p>This is my code and I can't seem to figure out how to center the image over the video. I have looked at a lot of other posts but cant seem to find what I'm looking for</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "UTF-8";
  /* CSS Document */
  *{
      border:0;
      padding:0;
      margin:0;
  }
  
  #contain{
      position:relative;
  }
  
  video {
    object-fit: fill;
  }
  
  video {
   height: 100vh;
   width: 100%;
   object-fit: cover;
   position: absolute;
  }
  
  #img {
      left: 30%;
      top: 50%;
      position:absolute;
      width:160px;
      min-height:40px;
      z-index:300000;
      text-align:center;
  }
  
  body {
      background-color: #111111;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div id="contain"&gt;
  &lt;div id="img"&gt;&lt;a style="color:white; font-family:verdana;" title="Home"&gt;&lt;img src="purefilmsw.png" alt="Pure Films" width="912.5" height="58.5"&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;div id= "vid"&gt;&lt;video id="background-video" autoplay loop muted&gt;
  &lt;source src="vid.mp4" type="video/mp4"&gt;
  &lt;/video&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>If anyone knows thanks</p>