在网页设计中，我们经常需要将视频居中显示，这可以通过HTML和CSS来实现，以下是详细的步骤和技术教学。

1、我们需要在HTML中插入视频，这可以通过<video>标签来实现。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

在上述代码中，<video>标签的宽度和高度属性定义了视频的尺寸，controls属性添加了播放、暂停和音量控制。<source>标签的src属性定义了视频文件的路径，type属性定义了视频文件的格式，如果浏览器不支持<video>标签，将显示<video>标签内的内容。

2、我们可以使用CSS来控制视频的位置，我们可以使用position: absolute;属性来绝对定位视频，然后使用top和left属性来调整视频的位置。

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

在上述代码中，position: absolute;属性将视频从文档流中移除，并使其相对于最近的非静态定位祖先元素进行定位。top: 50%;和left: 50%;属性将视频移动到其容器的中心。transform: translate(50%, 50%);属性将视频向左上方移动其自身宽度和高度的一半，以实现完全居中。

3、这种方法有一个问题，那就是当视频的宽度或高度小于其容器的宽度或高度时，视频可能会被裁剪，为了解决这个问题，我们可以使用objectfit: cover;属性来保持视频的宽高比，并将其缩放以填充其容器。

video {
  objectfit: cover;
}

在上述代码中，objectfit: cover;属性会使视频的尺寸调整为完全覆盖其容器，同时保持其宽高比。

4、我们可以使用JavaScript来检测浏览器是否支持<video>标签，并在不支持的情况下显示备用内容。

var video = document.querySelector('video');
var text = document.createElement('p');
text.innerHTML = 'Your browser does not support the video tag.';
video.parentNode.insertBefore(text, video);
if (video.canPlayType('video/mp4')) {
  video.src = 'movie.mp4';
} else if (video.canPlayType('video/ogg')) {
  video.src = 'movie.ogg';
} else {
  video.innerHTML = 'Your browser does not support the video format.';
}

在上述代码中，我们首先获取了<video>元素和一个新的<p>元素，我们将新的<p>元素插入到<video>元素的前面，并设置了其内容，接着，我们检查浏览器是否支持MP4和OGG格式的视频，如果支持，我们就设置视频的源，如果不支持，我们就设置视频的内容。

以上就是如何在HTML中居中显示视频的方法，希望对你有所帮助。