Css background video

Question

Does someone know how to center this video background?

I tried:

margin: 0 auto;
text-align: center;

So far but none of these worked

Answer 1

Since you are using an HTML5 element the best way to center content is to put it in a relative container and then let CSS handle the rest like this:

    
    



body, html {
    height: 100%;
}

#Container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#Container video {
    position: absolute;
    left: 50%;
    top: 50%;
    /* The following will size the video to fit the full container. Not necessary, just nice.*/
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 0;
}

#Container div {
    position: relative;
    z-index: 1;
}

You can replace by any element you want to center, of course. Because you are using the video element I'm ignoring older browsers as I guess they won't like your page anyway. You also don't have to use the min- values, and it would just center.