自动将边距0应用于父容器时视频未居中

Question

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

<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

Answer 1

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

当在元素上未指定任何非继承属性的值时，该元素将获取该属性的初始值（如属性摘要中所指定）。