Centering an HTML5 Image Using CSS3

first time here so easy!

I'm new to HTML and CSS in general, and I'm trying to create some sort of landing page for the web application project I'm working on.

The idea is for HTML5 video to play in full screen in the background (reached) with an image in the center of the page so that users can continue.

Image centering is where I fail. I can get the image on the horizontal axis, but not on the vertical axis and tried all day.

Any ideas on how to centralize the image as follows http://aberrocreative.com/ or http://www.ridebarstow.com/ ??

Video:

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

Picture

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

- , . !

Yikes, !

,

+4
1

: 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>
0

Source: https://habr.com/ru/post/1536274/


All Articles