css - CSS宽度100vw仅延伸到一侧

我正在使用以下代码：

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

我所拥有的是一个div，我试图使其与祖父母（屏幕宽度）相适应（沿宽度方向）。如您在上面的代码中看到的，我尝试使用width: 100vw，但是它只向右延伸，而左侧保持原样。

有谁知道为什么吗？

最佳答案

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

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

jsFiddle

关于css - CSS宽度100vw仅延伸到一侧，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41385443/