html - 在背景视频之上使用 CSS 将图像水平居中

Question

编码新手。我已将视频设置为在网站背景上自动播放。当我尝试将图像放在顶部时，我遇到了问题，尤其是在尝试将其水平居中时。

典型的解决方案会导致图像消失:

img.center {
   display: block;
   margin: 0 auto;
}

这是我的 Logo CSS:

.logo {
   position: absolute;
   margin-left: auto;
   margin-right: auto;
   height: 250px;
   padding-top: 15px;
}

我需要这个 Logo float 在背景视频的顶部，其样式如下:

#bgvideo {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   min-width: 100%;
   min-height: 100%;
}

Answer 1

就这么简单。这是一个工作 codepen .

HTML:

<video autoplay muted loop id="myVideo">
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<img id="myImg" src="https://www.searchenginegenie.com/images/29-samplelogo.jpg" width="200">

CSS:

#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
}
#myImg {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    margin: auto; 
}