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

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

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

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

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

工作小提琴