水平中心对齐比其容器

Question

我有一个视频作为我的新主页的背景播放：

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

视频为1920 x 600，因此对于大多数窗口大小，它都比它所在的视口大。中心将您的平均项目与边距对齐：0自动不在这里工作。我几乎想要-auto（减去自动），但那不起作用。

最终所需的外观是视频始终为600px高，但是当窗口调整大小时，边缘会被左右剪切，以便中心保持在视图中。我想在CSS中这样做，而且我不关心HTML 5之前的浏览器。

Answer 1

试试这个。我认为这会很好。它适用于div。

.container {
    position: relative;
}

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