将 YouTube 嵌入页面居中

Question

我一直在尝试将我的 YouTube 视频嵌入居中，但它无法正常工作。

我已经在 html 中尝试了 flexbox 和 center 标签，这是我得到的最接近的，这里真的需要一些帮助

我的代码：

CSS

    .Video {
      display: inline-block;
      position: absolute;
      padding-left: 15px;
      padding-right: 15px;
      transform: translate(0,-50%);
    }

Answer 1

问题是你的 css 是错误的。摆脱位置，显示和变换。我很确定你不需要任何这些。

查看我制作的 jsfiddle。我认为您正在寻找 margin: 0 auto;。确保嵌入的视频包裹在 div 中，然后应用边距。如果您已经有 margin-top 或 margin-bottom，则只需设置 margin-left: auto 和 margin-right: auto;

Answer 2

要使用 flex-box，这是可行的：将您的 .video 嵌入 .flex-container。给这个 .flex-container 一个宽度和一个高度。并将以下属性添加到 .flex-container：justify-content 和 align-items 将它们都设置为 center。而已。检查 this codepen。我使用了 joes（上图）HTML 标记。

另请查看代码笔上方未注释掉的标记。

重要的是，您要居中的元素是应用了 flex 属性的元素的直接子元素。

将 YouTube 嵌入页面居中

Centering YouTube Embed on Page

css

embed

video