html5 视频 居中

在HTML5中，要实现视频居中显示，可以采用以下方法：

1. 通过设置视频的宽度和高度为百分比来实现自适应屏幕大小。一般情况下，视频的宽度或高度设置为100%可以使视频充满整个父容器。

2. 使用JavaScript计算视频的缩放比例。可以通过以下公式计算缩放后的高度：

var scaleHeight = videoHeight * clientWidth / videoWidth;

其中，videoHeight是视频原始高度，clientWidth是容器的宽度，videoWidth是视频原始宽度。同样地，可以通过以下公式计算缩放后的宽度：

var scaleWidth = videoWidth * clientHeight / videoHeight;

其中，clientHeight是容器的高度。通过计算得到的缩放值，可以通过设置CSS样式来调整视频的尺寸。

3. 使用CSS的绝对定位来实现垂直居中。可以通过设置视频容器的top属性为50%来将其上边缘移动到垂直居中的位置。但是由于整体内容并不是垂直居中，还需要通过设置margin-top属性来将视频容器的上边距移动到高度的一半位置，即负父容器宽度的一半像素。例如：

margin-top: -2/父宽 px; //为高度的一半

其中，父宽是父容器的宽度。通过这种方式可以实现视频的垂直居中。

综上所述，通过设置视频的宽度和高度为百分比、计算缩放比例以及使用CSS的绝对定位等方法，可以实现HTML5视频的居中显示。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>