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

Question

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

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

如何在Web浏览器中水平和垂直居中显示该视频元素？我更喜欢CSS解决方案,或者至少是一种尽可能少使用hackish技术的解决方案,但我会采取我能得到的.

Answer 1

使用以下css将使您的视频元素垂直和水平居中.

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

工作小提琴

Answer 2

包含一个简单的 css 中心类，例如：

    .center { margin: 0 auto; width: 400px; }

然后试试这个：

    <video class="center" height="{HEIGHT}" width="{WIDTH}" controls="">
       <source src="{SOURCE}" type="{TYPE}"/>
    </video>