How can I center an image over a video using HTML and CSS?

Question

I'm working on a website where I have a background video playing, and I want to display a company logo over that background video while it plays. I want that logo to be centered. I'm using HTML and CSS. Right now, my HTML code for that section is:

#reel {
  position: absolute;
  visibility: hidden;
  right: 0;
  top: 8px;
  min-width: 100%; 
  min-height: 100%;
}

#overlay {
  top: 50%;
}

<!-- BACKGROUND REEL--> 
<div>
  <video playsinline autoplay muted loop id="reel">
    <source src="Media/Reel.mp4" type="video/mp4">
  </video>
  <img class="overlay" width="40%" src="Media/Transparent.png">
</div>

For whatever reason, I can't quite get it to center. I want the page to be able to shrink and have the logo stay in the center but right now it's not. Does anyone know why?

Answer 1

#wrapper {
  position: relative;
  display: inline-block;
}
#reel {
  width: 100vw;
}
.overlay {
  position: absolute;
  width: 40%;
  left: 30%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div id="wrapper">
  <video playsinline autoplay muted loop id="reel">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  </video>
  <img class="overlay" src="https://www.w3schools.com/images/driveicon_32.png">
</div>

I think this code might help you.

(Please change the "src" attribute in real usage.) Best regards