怎么把视频在div盒子里居中

可以使用CSS的flex布局来实现视频在div盒子里居中。具体的代码如下：

HTML代码：

<div class="container">
  <video src="video.mp4"></video>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}

video {
  max-width: 100%;
  max-height: 100%;
}

其中，container是div盒子的类名，video是视频标签。通过设置display为flex，然后使用justify-content和align-items属性来实现水平和垂直居中。同时，设置视频的max-width和max-height为100%来保证视频在div盒子里面不会超出范围。

相关问题

Div盒子居中

要让一个 div 盒子在水平和垂直方向都居中，可以使用如下的 CSS 代码：

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

这里使用了绝对定位将 div 盒子从文档流中拖出，然后使用 top 和 left 属性将其移动到浏览器的中心，最后使用 transform 属性将其向左和向上移动自身宽高的一半，从而使其在水平和垂直方向都居中。

css的div盒子水平居中

在CSS中，让一个`div`元素水平居中，有几种常见的方法。这里介绍两种常见的方法：

1. **使用Flexbox**:
如果你的父容器是块级元素，并且支持Flexbox布局（大多数现代浏览器都支持），你可以这样设置：

   .parent {
     display: flex;
     justify-content: center;
   }
   
   .child-div {
     /* 其他样式 */
   }

在这个例子中，`.child-div`将会在其父容器`.parent`内水平居中。

2. **使用Grid布局**:
另一个选择是使用CSS Grid，如果适用的话：

   .parent {
     display: grid;
     place-items: center;
   }
   
   .child-div {
     /* 其他样式 */
   }

这里`.child-div`同样会水平和垂直居中于其父容器。

3. **使用绝对定位**:
对于不支持 Flexbox 和 Grid 的旧版浏览器，可以使用绝对定位：

   .parent {
     position: relative;
   }
   
   .child-div {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     /* 其他样式 */
   }

在这种方法中，`left: 50%`将元素向左移动自身宽度的一半，然后`transform: translateX(-50%)`将其回移，实现了居中。

相关问题--
1. CSS中的Flexbox和Grid布局分别是什么？
2. 使用绝对定位时为什么要设置`left: 50%`和`transform: translateX(-50%)`？
3. 如何判断一个浏览器是否支持Flexbox或Grid布局？