如何在基本 HTML 文档中水平和垂直居中 HTML5 视频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34626069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I center an HTML5 video horizontally and vertically in a bare bones HTML document?
提问by Melab
Let's say I have a verysimple HTML page with a single HTML5 video element. It's source code is:
假设我有一个非常简单的 HTML 页面，其中包含一个 HTML5 视频元素。它的源代码是：
<html>
<head>
<title>{TITLE}</title>
</head>
<body>
<video height="{HEIGHT}" width="{WIDTH}" controls="">
<source src="{SOURCE}" type="{TYPE}"/>
</video>
</body>
</html>
What can I do to center that video element both horizontally and vertically in the web browser? I'd prefer a CSS solution or at least a solution that uses as little in the way of hackish techniques as possible, but I'll take what I can get.
我该怎么做才能使该视频元素在 Web 浏览器中水平和垂直居中？我更喜欢 CSS 解决方案，或者至少是一个尽可能少使用黑客技术的解决方案，但我会尽我所能。
回答by ketan
Use following css will make your video element center vertically and horizontally.
使用以下 css 将使您的视频元素垂直和水平居中。
video {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
回答by Kunj
Couple of ways to achieve it (Added jQuery to help others as well):
实现它的几种方法（添加 jQuery 以帮助其他人）：
Method 1:Add this class in your video
方法一：在你的视频中添加这个类
CSS:
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);
}
Method 2:Add some code for dynamic margins
方法二：添加一些动态边距的代码
CSS:
CSS：
.center {
position: absolute;
top: 50%;
left: 50%;
}
Code:
代码：
$('video').css({
'margin-top': - $('video').height()/2,
'margin-left': - $('video').width()/2
});
Method 3:Window size
方法三：窗口大小
Code:
代码：
$(window).on('load resize', function(){
$('video').css({
'position' : 'absolute',
'top': $(window).height()/2 - $('video').height()/2,
'left': $(window).width()/2 - $('video').width()/2
});
});
Here is a link How to center an element horizontally and verticallyfor more detailed description.
这是一个链接如何水平和垂直居中元素以获得更详细的描述。
回答by Luká? Irsák
For background video i use this
对于背景视频，我使用这个
HTML:
HTML：
<video class="background" controls="">
<source src="{SOURCE}" type="{TYPE}"/>
</video>
CSS:
CSS：
.background {
position: fixed;
right: 0px;
bottom: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
回答by Legeran
Include a simple css center class, like this for example:
包括一个简单的 css 中心类，例如：
.center { margin: 0 auto; width: 400px; }
And then try this:
然后试试这个：
<video class="center" height="{HEIGHT}" width="{WIDTH}" controls="">
<source src="{SOURCE}" type="{TYPE}"/>
</video>
回答by billynoah
Nothing very complex about this but here you go...
没有什么非常复杂的，但在这里你去......
100% height on body and html gives you full screen vertical size. Position the video using relative positioning 50% down and subtract half the height for a negative margin to account for element size. This is pretty much the standard way but there are a bazillion others.
body 和 html 上的 100% 高度为您提供全屏垂直尺寸。使用相对定位向下 50% 定位视频并减去一半高度以获得负边距以考虑元素大小。这几乎是标准方式，但还有无数其他方式。
html,
body {
height: 100%;
}
body {
text-align: center;
margin: 0;
}
video {
top: 50%;
position: relative;
margin-top: -75px;
height: 150px;
}<html>
<head>
<title>{TITLE}</title>
</head>
<body>
<video height="{HEIGHT}" width="{WIDTH}" controls="">
<source src="{SOURCE}" type="{TYPE}" />
</video>
</body>
</html>回答by Ethan Fischer
I'm new to web development. But I think what you want to do is to add an id to your video tag
我是网络开发的新手。但我认为你想要做的是在你的视频标签中添加一个 id
Then in your CSS file, do this
然后在您的 CSS 文件中，执行此操作
#vid {
position: absolute;
top: 30%;
left: 30%;
}
Experiment with the percentages to find what looks perfectly centered. Again, I'm new to this and I'm sure there's a better way to do it. But hey you said you'd take what you can get!
试验百分比以找到看起来完全居中的内容。再次，我是新手，我相信有更好的方法来做到这一点。但是，嘿，你说你会拿走你能得到的！
