CSS 宽度 100vw 只延伸到一侧

Question

我正在使用以下代码:

#div {
  position: absolute;
  left: 0;
  right: 0;
  width: 100vw !important;
  height: 210px !important;
  background-image: url('imageurl.com');
  background-position: center;
}

我拥有的是一个 div，我正试图使其适合(宽度方向)祖 parent (屏幕宽度)。正如您在上面的代码中看到的，我尝试使用 width: 100vw，但它只向右延伸，左侧保持原样。

有人知道为什么吗？

Answer 1

尝试同时使用 left: 50%; 和 transform: translateX(-50%);。

#div {
  width: 100vw;
  height: 210px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

jsFiddle