html - 使用 CSS3 将图像置于 HTML5 视频背景的中心

Question

第一次来这里所以放轻松!

总的来说，我对 HTML 和 CSS 还很陌生，我正在尝试为我正在处理的网络应用程序元素创建一种登录页面。

想法是让 HTML5 视频在后台全屏播放(已实现)，并在页面中央显示图像以允许用户继续操作。

将图像居中是我失败的地方。我可以让图像在水平轴上居中，但不能在垂直轴上居中，我一直在尝试一整天。

任何想法如何像这样集中图像 http://aberrocreative.com/或者这个 http://www.ridebarstow.com/ ??

视频:

    <video id="video_background" loop autoplay  preload="auto" poster="/images/department.jpg">
    <source src="videos/department1.mp4" type="video/mp4"/>
    <source src="videos/department1.ogv" type="video/ogv"/>
    <source src="videos/department1.webm" type="video/webm"/>
    <p>Sorry! It seems your browser doesn't support HTML5 video :( </p>
</video>

#video_background
{
position: fixed;
top: 0;
bottom: 0;
left:0;
right:0;
z-index: -1000;

图片:

<div id="welcome_image">
    <img src="images/welcome.png" alt="Electronics at York"/>
</div>

#welcome_image {
display: -webkit-box;
display: -moz-box;
display: box;

-webkit-box-orient: inline-axis;
-moz-box-orient: inline-axis;
box-orient: inline-axis;

-webkit-box-align: end;
-moz-box-align: end;
box-align: end;

-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
z-index: 100;}

图像样式只是我尝试过的最新方法。我快迷路了!

哎呀，对于垃圾代码和长度也很抱歉!

谢谢，尼克

Answer 1

如果父级有 display:flex;，子级将使用 margin:auto; 水平和垂直居中。需要明确的是，子项在父项而不是屏幕中居中，因此如果您希望子项居中，则使用此特定方法，父项需要填充屏幕。有更多方法可以使元素居中，但这是我最近使用的方法。

#background{
  display:flex;
  position:fixed;
  width:100vw;
  left:0px;
  height:100vh;
  top:0px;
}

#center{
  margin:auto;
}

<div id='background'>
  <div id='center'>Here we go.</div>
</div>