css - 如何在简单的 HTML 文档中水平和垂直居中 HTML5 视频？

<分区>

假设我有一个非常简单的 HTML 页面，其中包含一个 HTML5 视频元素。它的源代码是:

<html>
    <head>
        <title>{TITLE}</title>
    </head>
    <body>
        <video height="{HEIGHT}" width="{WIDTH}" controls="">
            <source src="{SOURCE}" type="{TYPE}"/>
        </video>
    </body>
</html>

我该怎么做才能使该视频元素在网络浏览器中水平和垂直居中？我更喜欢 CSS 解决方案，或者至少是尽可能少使用 hackish 技术的解决方案，但我会尽我所能。

最佳答案

使用以下 CSS 将使您的视频元素在垂直和水平方向上居中。

video {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

Working Fiddle

关于css - 如何在简单的 HTML 文档中水平和垂直居中 HTML5 视频？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34626069/

上一篇：css - 如何只为 Chrome 浏览器设置 margin-top？

下一篇：jquery - 如何使用 alertify.js 更改 alertify.error 中的字体颜色

相关文章：

javascript - 在 Jquery 中使用数组

javascript - HTML5 Canvas JavaScript 十字线网格

javascript - 从已使用 AJAX 更新的列表框中获取最新值

javascript - 谁能帮我让搜索栏正常工作，因为我现在有 JS 提示符？

c# - 将 Word 文档文本转换为 HTML 的库

html - 如何强制 html 表格的 "td"元素内的单独元素以内联方式显示(从左到右)？

jquery - 如何将 <td> 与右侧的数字对齐，jQuery

ios - IONIC 3 - 底部标签 iPhone X UI 问题

css - 如果空间可用，添加水平边距

html - 如何使用CSS选择每个重复的类系列的最后一个子代？