当边距 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 is not inherited。因此，当您的 margin: 0 auto 仅应用于 .root 时，<video> 元素采用初始（未对齐）值：

When no value for a non-inherited property has been specified on an element, the element gets the initial value of that property (as specified in the property's summary).

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

Video not centering when margin 0 auto applied to parent container

css

video

sass

centering