如何将HTML5视频水平地和垂直地集中在一个基本的HTML文档中？
如何将HTML5视频水平地和垂直地集中在一个基本的HTML文档中？
提问于 2016-01-06 05:13:43
假设我有一个非常简单的带有单个HTML5视频元素的HTML页面。它的源代码是：
<html>
<head>
<title>{TITLE}</title>
</head>
<body>
<video height="{HEIGHT}" width="{WIDTH}" controls="">
<source src="{SOURCE}" type="{TYPE}"/>
</video>
</body>
</html>我能做些什么来在网页浏览器中对视频元素进行水平和垂直的居中呢？我更喜欢CSS解决方案，或者至少是一个尽可能少使用黑客技术的解决方案，但我会采取我所能得到的。
回答 6
Stack Overflow用户
发布于 2016-01-06 05:39:27
使用以下css将使您的视频元素垂直和水平中心。
video {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}Stack Overflow用户
发布于 2016-01-06 05:39:37
实现它的几种方法(添加jQuery以帮助其他人)：
方法1:在视频中添加该类
CSS：
.center {
position: absolute;
//Option 1
top:50%; left: 50%;
margin-left: -150px;
margin-top: -75px;
//Option 2 (Needs to check browser compatibility)
top: calc(50%-75px);
left: calc(50%-150px);
}方法2:为动态边距添加了一些代码
CSS：
.center {
position: absolute;
top: 50%;
left: 50%;
}代码：
$('video').css({
'margin-top': - $('video').height()/2,
'margin-left': - $('video').width()/2
});方法3:窗口大小
代码：
$(window).on('load resize', function(){
$('video').css({
'position' : 'absolute',
'top': $(window).height()/2 - $('video').height()/2,
'left': $(window).width()/2 - $('video').width()/2
});
});下面是一个链接如何使元素水平地和垂直地对中，以获得更详细的描述。
Stack Overflow用户
发布于 2016-01-06 05:49:40
在背景视频中，我使用这个
HTML：
<video class="background" controls="">
<source src="{SOURCE}" type="{TYPE}"/>
</video>CSS：
.background {
position: fixed;
right: 0px;
bottom: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
} 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34626069
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号