水平居中对齐比其容器更大的项目

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，因此对于大多数 window 尺寸来说，它比它所在的视口大。将您的平均项目与 margin:0 自动居中对齐在这里不起作用。我几乎想要 -auto（减去 auto），但这不起作用。

最终期望的外观是视频始终为 600 像素高，尽管随着 window 调整大小，左右边缘被剪裁，以便中心保持在视图中。我想在 CSS 中执行此操作，我不关心 HTML 5 之前的浏览器。

Answer 1

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

.container {
    position: relative;
}

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

Horizontal center align a larger item than its container