Html 如何使100vw物品在未居中且非全宽的容器内居中？

我在一个不是全宽715px的容器中有一个全宽元素。这个容器没有居中，因为它旁边有一个边栏245px

我无法绝对定位项目，因为它是动态的/矩阵中的块

如何确保无论屏幕大小如何，它始终处于中心位置

保证金：自动 剩余利润：50%

不起作用，使用百分比并在视觉上这样做是不起作用的，因为一旦屏幕大小改变，全宽元素就不再居中

HTML

---

链接到codepen示例

一般来说，我认为最好将children元素限制在其父母的范围内，因为这会变得非常棘手。但是，如果需要使用此布局，可以尝试以下方法：

margin-left: calc((-1 * 960px * .25) - (50vw - (.5 * 960px)));

我相信这可以缩短，但为了清晰起见，我想保留完整的计算。第一部分，-1*960px*.25移动洋红色框，使其左边缘与栅格的左边缘对齐。第二部分50vw-.5*960px然后进一步移动洋红色框，使其左边缘与浏览器的左边缘对齐

问题是它有点脆。这在很大程度上取决于“grid”元素的确切宽度和左栏的宽度百分比

---

有一个很好的关于居中的项目，比他们的父母更广泛的帖子。它的解决方案并不直接适用于本案例，但它是更好地了解您的选项的一个很好的资源，我使用它来开发我使用的calc语句

发布您拥有的内容的一个工作片段。此页面非常鼓舞人心：@PoulBak感谢！但父容器未居中。此外，项目是动态的，因此不能绝对定位，因为它们可以以任何顺序显示或根本不显示。必须有更好的方式来布局您的内容。如果边栏列表项变长，则全幅内容将与边栏列表项相交。只要我的2美分。否则，Hofma Dresu的解决方案几乎是解决这一特殊情况的最简单方法。

.grid {
    width: 960px;
    display: flex;
    margin: auto;
}

.grid-item {
    display: inline-block;

}

.one-quarter {
    width: 25%;
    border: 1px solid red;
}
.three-quarters {
    width: 75%;
    border: 1px solid blue;
}

.page-builder-item {
    background: pink;
    height: 100px;
    width: 100%;
}

.page-builder-item.full-width {
    width: 100vw;
    background: magenta;
    margin-left: -25%;
}

margin-left: calc((-1 * 960px * .25) - (50vw - (.5 * 960px)));