H5的video居中样式

H5中的video元素想要实现水平和垂直居中，可以采用CSS Flexbox或Grid布局，或者利用一些技巧结合`object-fit`属性。以下是三种常见的方法：

1. **Flexbox**:

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.video-container {
  position: relative;
  height: 0; /* 或者给一个固定高度, 清除默认高宽比 */
  padding-bottom: 56.25%; /* 视频宽度比例 */
  overflow: hidden;
}
.video-container video {
  width: 100%;
  height: auto;
}

2. **CSS Grid**:

.container {
  display: grid;
  place-items: center; /* 同样实现居中 */
}
.video-container {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
.video-container video {
  width: 100%;
  height: auto;
}

3. **使用`object-fit: cover`** (适用于自适应大小的容器)：

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
.video-container video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}