边距 0 自动应用于父容器时视频不居中答案

【问题标题】：Video not centering when margin 0 auto applied to parent container边距 0 自动应用于父容器时视频不居中
【发布时间】：2020-02-04 10:01:32
【问题描述】：

我正在尝试将视频水平居中。

<section class="root">
  <div class="bg-video">
    <video class="bg-video__content" autoplay muted loop>
      <source src="https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4">
      Video not supported.
    </video>
  </div>
</section>

*
{
  box-sizing: border-box;
}

html
{
  font-size: 10px;
}

.bg-video__content
{
  display: block;
  max-width: 100rem;
  margin: 0 auto;         
}

.root
{
  // why won't this work?
  // display: block;
  // max-width: 100rem;
  // margin: 0 auto;
}

如果我尝试将 .bg-video__content 直接居中，它会起作用。但是，如果我尝试将 .root 居中，它不会按预期工作。

.root
{
  // why won't this work?
  display: block;
  max-width: 100rem;
  margin: 0 auto;
}

我想通过使视频容器居中来使视频居中。

这是一个现场演示：https://codepen.io/loganlee/pen/LYVPPww?editors=1100

【问题讨论】：

标签： css video sass centering

【解决方案1】：

.bg-video__content 元素是您的 <video>，而 .root 是祖先。 CSS 属性 margin 不是 inherited。因此，当您的 margin: 0 auto 仅应用于 .root 时，<video> 元素采用初始（未对齐）值：

当没有为元素指定非继承属性的值时，该元素将获取该属性的初始值（在属性摘要中指定）。

【讨论】：