Горизонтальный центр выравнивания больший элемент, чем его контейнер

Question

У меня есть видео воспроизводится в качестве фона для моей новой домашней страницы:

<video class="hero" autoplay loop muted> 
    <source src="backvid.webm" type="video/webm"> 
    <source src="/backvid.mp4" type="video/mp4"> 
</video> 

видео 1920 х 600, и поэтому для большинства размеров окна она больше область просмотра, в которой он находится. Центр выравнивает ваш средний элемент с полем: 0 auto здесь не работает. Я почти хочу -auto (минус авто), но это не работает.

Конечный желаемый внешний вид видео всегда должен быть высотой 600 пикселей, хотя при изменении размера окна края обрезаются влево и вправо, чтобы центр оставался в поле зрения. Я хотел бы сделать это в CSS, и мне не нужны браузеры с предварительным HTML 5.

Answer 1

Попробуйте это. Я думаю, это будет хорошо. Он работает с div.

.container { 
    position: relative; 
} 

.item { 
    position: absolute; 
    left: 50%; 
    transform: translate(-50%, 0); 
}