Вложение видео по центру изображения

Question

Я пытаюсь выровнять видео по центру изображения.

.vbackground { 
 
    background-image: url('http://s1.postimg.org/hdo0xh2of/image.png'); 
 
    background-repeat: no-repeat; 
 
    width: 600px; 
 
    height: 600px; 
 
    position: relative; 
 
} 
 
#match { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='vbackground'> 
 
    <video controls id='match' width='300' height='300'> 
 
    <source src='match.mp4' type="video/mp4" /> 
 
    </video> 
 
</div>

Как я мог бы сделать видео в центре изображения (со всех сторон)? В настоящее время он выравнивается в нижней части изображения.

Answer 1

Просто добавьте margin-left:auto и margin-right: auto; к вашему #match CSS STYLE, и он выровняет видео по центру изображения.

 
#match { 
 

 
    margin-left: auto; 
 
    margin-right: auto; 
 

 
}

Answer 2

Попробуйте удалить position: absolute правила из селектора в match и установите text-align свойство на .vbackground класса center.
Это должно работать -

.vbackground { 
    background-image: url('http://s1.postimg.org/hdo0xh2of/image.png'); 
    background-repeat: no-repeat; 
    width: 600px; 
    height: 600px; 
    position: relative; 
    text-align: center; 
}  
#match { 
    /*position: absolute;*/ 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
}