html - 如何使视频垂直居中

Question

我在 div 标签中有我的视频，我将它水平居中到窗口

    .center { margin: 0 auto; width: 720px; height: 480px; }

我一直在尝试将其垂直居中于窗口

   .center { margin: 0 auto 0 auto; width: 720px; height: 480px; }

它不起作用。

有任何想法吗？

Answer 1

您可以使用绝对定位轻松完成此操作。例如（将其居中到容器中）：

.center { 
    width: 720px; 
    height: 480px; 
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -240px 0 0 -360px;
}

基本上，您将其指定为距容器左上角的 50%，然后指定负边距，分别为高度和宽度的一半。

请看这个jsFiddle 演示

Answer 2

如果你要使用absolute一个常见的做法是：

.center { 
    width: 720px; 
    height: 480px; 
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right:0;
    margin: auto;
}

这会将其置于其容器的中心。