如何将视频在其所属DIV容器内居中？附CSS及HTML代码示例

嘿，我来帮你搞定视频居中的问题～先看看你现有代码里的小问题：你给视频加了.center类，里面只写了text-align: center，但这个属性是让元素内部的内容居中（比如视频的播放控件），没法让视频这个块级元素本身在父容器里居中。

下面给你两种靠谱的解决方案，按需选用：

方案一：基础水平居中（最常用） #

修改你的.center类样式，让视频作为块级元素自动水平居中：

.center {
  display: block; /* 确保视频是块级元素，默认其实就是，但明确写出来更稳妥 */
  margin: 0 auto; /* 左右自动外边距，实现块级元素水平居中 */
  text-align: center; /* 保留这个，让视频内部的播放控件也居中 */
}

你的HTML结构不用改，保持原样就行，修改后视频就能在.courses-col容器里水平居中了。

方案二：水平+垂直双居中（如果需要） #

如果你还想让视频在.courses-col里垂直也居中，可以把.courses-col改成flex布局，这样不管容器高度多少，视频都能居中：

.courses-col{ 
  float: left; 
  width: 50%; 
  display: flex;
  flex-direction: column; /* 垂直方向排列子元素 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中，如果有需要的话 */
  min-height: 300px; /* 给容器一个最小高度，方便看垂直居中效果 */
}

这个时候.center类甚至可以只保留width:80%，flex布局已经帮你搞定居中了。

完整修改后的代码示例 #

CSS：

.courses-container { 
  display: table-cell; 
  width: 100%; 
  background-color: #00ffd0; 
}
.courses-col{ 
  float: left; 
  width: 50%; 
}
@media only screen and (max-width: 500px) { 
  .courses-col { 
    float: left; 
    width: 100%; 
  } 
}
.center { 
  display: block;
  margin: 0 auto;
  text-align: center; 
}

HTML：

<div class="courses-container">
  <div class="courses-col">
    <br>
    <video class="center" width="80%" autoplay controls loop>
      <source src="Video URL" type="video/mp4">
      你的浏览器不支持视频播放功能，请升级浏览器后重试。
    </video>
  </div>
</div>

内容的提问来源于stack exchange，提问作者user9642283