how can i center an image over a video in html?-CodePudding

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

@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;
}

<body>
<div id="contain">
<div id="img"><a style="color:white; font-family:verdana;" title="Home"><img src="purefilmsw.png" alt="Pure Films" width="912.5" height="58.5"></a></div>
<div id= "vid"><video id="background-video" autoplay loop muted>
<source src="vid.mp4" type="video/mp4">
</video></div>
</div>
</body>

If anyone knows thanks

CodePudding user response：

Using a display:flex container it's relatively easy to center content, vertically and horizontally.

@charset "UTF-8";

#contain {
  position: relative;
}

video {
  object-fit: fill;
}

video {
  height: 100vh;
  width: 100%;
  object-fit: cover;
  position: absolute;
}

#img {
  height: 100vh;
  width: 100%;
  display: flex;
  z-index: 2;
  position:absolute;
  justify-content: center;
  align-items: center;
}

body {
  background-color: #111111;
}

<body>
  <div id="contain">
    <div id="img">
      <a style="color:white; font-family:verdana;" title="Home">
        <img src="https://picsum.photos/320/240" alt="Pure Films">
      </a>
    </div>
    <div id="vid">
      <video id="background-video" autoplay loop muted>
        <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
      </video>
    </div>
  </div>
</body>

CodePudding user response：

you can try transform: translate in #img

@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;
    transform: translateX(50%),translateY(50%);
}

body {
    background-color: #111111;
}

<body>
<div id="contain">
<div id="img"><a style="color:white; font-family:verdana;" title="Home"><img src="purefilmsw.png" alt="Pure Films" width="912.5" height="58.5"></a></div>
<div id= "vid"><video id="background-video" autoplay loop muted>
<source src="vid.mp4" type="video/mp4">
</video></div>
</div>
</body>