我想将一个超大的全屏视频居中。 它适用于 webkit，但不适用于 firefox。
如果您的浏览器分辨率大于 1300 像素，视频 Logo 应始终保持在垂直/水平中心，就像在 chrome 中一样。在 Firefox 中，虽然它只是水平居中。 (对于小分辨率没关系，我在那里加载了不同的视频。)
有人知道魔法线吗？
用于历史目的的代码(与演示中的相同):
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
}
#slider {
height: 100%;
margin: auto;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
.id3 {
background-color: #253061;
z-index: 1;
}
.plane {
height: 100%;
position: absolute;
top: 0;
vertical-align: bottom;
width: 100%;
}
.videoslide {
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
}
.bgvid {
bottom: 0;
left: 0;
margin: auto;
min-height: 100%;
min-width: 100%;
position: absolute;
right: 0;
top: 0;
z-index: -100;
}
</style>
</head>
<body>
<div id="slider">
<div class="plane id3" rel="3">
<div class="videoslide">
<video autoplay="autoplay" loop class="bgvid">
<source type="video/mp4" src="startseite_5_1251.mp4"></source>
</video>
</div>
<div class="innerplane">
<div class="text" rel=4>
<div class="title">Wir produzieren aufregenden Video Content -</div>
<div class="title subtitle3 bmarg50">Zum Beispiel für den Ryder Cup.</div>
<a class="sliderlink link3" href="#">Projekt ansehen</a>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
试试这个:
.bgvid {
margin: auto;
min-height: 100%;
min-width: 100%;
position: absolute;
z-index: -100;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
关于html - 如何在 Firefox 中垂直和水平居中超大全屏视频？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28304260/