迹忆客 专注技术分享

在本文中，用户将学习仅使用 CSS 将 <video> 元素居中。 我们已经在下面解释了使用 CSS 使视频居中的多种方法。

但是，用户可以将 <video> 元素放在 <center> 标签内，这样可以轻松地将视频元素居中。 但在我们的例子中，我们不会使用 <center> 标签，因为我们只需要使用 CSS 属性。

使用 margin-left 和 transform CSS 属性使视频元素居中

我们可以使用 CSS 的 margin-left 和 transform 属性使视频元素居中，而无需使用 HTML <center> 标签。

margin-left 属性允许我们在元素的左侧留出空间。 使用 margin-left 属性的 50vw 值将屏幕宽度的一半留在元素的左侧。

这里，数值中的vw代表屏幕的窗口大小。

transform 属性用于使用 CSS 更改元素的位置。 如果我们使用 translate(-50%) 作为 transform 属性的值，它会将视频移动到负 x 方向，这意味着向左移动视频元素宽度的 50%。

例如，我们在其中创建了 <video> 和 <source> 标签以将视频嵌入到 HTML 中。 之后，我们将一些 CSS 属性应用于 <video> 标签。

通过应用 transform: translate(-50%) 属性，我们确保视频的中心线覆盖屏幕的中心线。

HTML 代码：

<video width="300" height="200" controls>
    <source
        src="https://www.test.com/watch?v=ZHumjSDbxUQ&ab_channel=Jiyik"
        type="video/mp4"
    />
</video>

CSS 代码:

video {
    margin-left: 50vw;
    transform: translate(-50%);
}

使用 display 和 margin CSS 属性使视频元素居中

我们将使用 display 和 margin CSS 属性来使这部分的视频元素居中。

用户可以根据自己的需要设置 display 属性的值来在网页上渲染元素。 在我们的例子中，我们将设置 display: block 以显示块中的元素。

如上例所述，margin 属性允许我们设置元素周围的空间。 我们将 margin: 0 auto 值设置为 margin 属性。

这里，0代表我们需要在元素的顶部和底部设置0空间。 auto 值表示我们需要在元素的左右设置相等的空间。

这样，通过在元素的左侧和右侧设置相等的空间，我们可以仅使用 CSS 将视频居中。

我们在下面的示例中创建了 HTML <video> 元素并应用了上述 CSS 属性。

HTML 代码：

<video width="300" height="200" controls>
    <source
        src="https://www.youtube.com/watch?v=ZHumjSDbxUQ&ab_channel=Jiyik"
        type="video/mp4"
    />
</video>

CSS 代码:

video {
    display: block;
    margin: 0 auto;
}

使用 width、justify-content 和 display CSS 属性使视频元素居中

在此示例中，我们将创建 HTML <div> 元素并分配容器类名。 我们将在 <div> 元素内添加两个 <video> 元素。

在这里，我们将使用其类名访问 <div> 元素，以将 CSS 属性应用于整个 <div> 元素。

在 CSS 中，我们将使用 width:100% 属性，它指定具有容器类的 <div> 元素的宽度应与屏幕宽度相同。 之后，我们将使用 justify-content: center CSS 属性，它允许我们将 <div> 元素的内容居中。

display: flex 和 flex-direction: Row 属性在同一行中显示两个 <video> 元素。 在这里，justify-content 属性在使 <div> 元素居中方面起着主要作用。

我们可以使用这三个属性将 <div> 元素的内容居中。

HTML 代码：

<div class="container">
    <video width="300" height="200" controls>
        <source
          src="https://www.test.com/watch?v=ZHumjSDbxUQ&ab_channel=Jiyik"
          type="video/mp4"
        />
    </video>
    <video width="320" height="240" controls>
        <source
          src="https://www.test.com/watch?v=ZHumjSDbxUQ&ab_channel=Jiyik"
          type="video/mp4"
        />
    </video>
</div>

CSS 代码:

.container {
    width: 100%;
    justify-content: center;
    display: flex;
    flex-direction: row;
}

在上面的输出图像中，用户可以看到两个视频都在一行中并且位于屏幕中央。

本文向我们介绍了使用 CSS 使 <video> 元素居中的三种方法。 所有这三种方法都可以与其他 HTML 元素一起使用以使其居中，因为它们不是特定于元素的。