html - 将内部元素放在“最大宽度”容器之外

Question

我想设置一个元素（红色），它放置在一个容器中，最大宽度（灰色）居中，位于视口宽度的 50% 处。

代码就像：

<div class="container" style="max-width:700px;margin:0 auto;">
<div class="inner-element">Should be 50% of viewport-width</div>
</div>

我试过 position:absolute 但也许有更好的解决方案。提前致谢。

标签： htmlcsssass

Answer 1

您可以尝试vw如下

.container {
  max-width: 400px;
  margin: 0 auto;
  background:grey;
  padding:20px 0;
}

.inner-element {
  position:relative;
  left:50%;
  width:50vw;
  background:red;
  height:50px;
  opacity:0.5;
}

<div class="container" style="">
  <div class="inner-element">Should be 50% of viewport-width</div>
</div>